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网 页 设计 技术 在 最 近 10 余 年 的 发 展 过 程 中 ,已 经 发 生 了 很 多 革命 性 的 变化 ,如 “Web 
标准 ”从 提出 到 被 普遍 接受 ,HIM 5 逐渐 被 浏览 器 支持 并 在 移动 开发 中 广泛 应 用 。 目 前 网 
页 设计 工程 领域 招聘 网 页 设计 人 员 时 最 常见 的 要 求 就 是 要 懂 DIV+ CS5, 并 能 够 手工 编写 代 
码 制作 网 页 。 这 些 要 求 代表 了 网 页 设计 技术 的 发 展 趋 势 。 

网 站 开发 的 另 一 方面 是 网 站 的 程序 设计 ,PHP 作为 网 站 程序 设计 的 流行 技术 ,在 国内 
外 的 应 用 发 展 非常 迅速 ,许多 大 型 的 网 站 (如 淘宝 、 搜 狐 等 ) 都 采用 PP 作为 网 站 的 开发 工 
具 ; 同 时 ,通过 对 众多 软件 企业 的 调查 ,可 以 发 现 各 种 企业 对 于 PP 开发 人 才 的 需求 缺口 
很 大 。 与 此 不 相称 的 是 ,PHP 在 我 国 高 校 教学 中 还 未 受到 足够 重视 。 虽 然 很 多 专业 都 已 开 
设 了 Web 编程 方面 的 课程 ,但 是 该 门 课程 的 内 容 以 讲述 APNET、AP 或 JP 语 言 为 主 ,可 见 PP 
尚未 在 高 校 教 学 中 取得 足够 的 重视 ,但 PP 的 培训 课程 却 在 大 量 培训 机 构 中 广泛 开设 。 

本 书 在 编排 时 考虑 到 网 站 开发 技术 的 系统 性 和 高 校 的 教学 需要 。 由 于 Wb 标准 仅仅 
涉及 网 页 的 前 端 开发 技术 ,主要 是 XHIM 和 Css, 但 很 多 专业 在 开设 网 站 开发 类 课程 时 , 授 
课 的 内 容 大 多 会 包括 静态 网 页 和 动态 网 站 技术 两 方面 。 因 此 本 书 还 包括 了 JavaScript 和 
PHP 的 内 容 ,PHP 作 为 动态 网 页 的 经 典 技术 ,具有 简单 易学 .实验 环境 容易 配置 等 优点 。 通 
过 学 习 PP, 能 为 将 来 学 习 其 他 动态 网 页 技术 打下 良好 的 基础 。 本 书 对 于 PP 程序 实例 ,在 
其 静态 网 页 设计 部 分 仍然 遵循 Wb 标准 ,采用 DM+CS 布局。 而 JavaScript 作为 Web 前 端 开发 
技术 已 越 来 越 受 到 追求 用 户 体验 的 互联 网 企业 的 重视 ,本 书 介绍 了 JavaScript 的 入 门 知识 
和 关键 技术 。 

网 页 设计 这 门 课程 的 特点 是 入 门 比较 简单 ,但 它 的 知识 结构 庞杂 , 想 要 成 为 一 名 有 
的 网 页 设计 师 是 需要 较 长 时 间 的 理论 学 习 和 大 量 的 实践 操作 及 项 目 实 训 的 。 学 习 网 页 设 
计 有 两 点 是 最 重要 的 : 一 是 务必 要 重视 对 原理 的 掌握 ;二 是 在 理解 原理 的 基础 上 一 定 要 
多 练习 ,多 实践 ,通过 练习 和 实践 总 能 发 现 很 多 实际 的 问题 。 本 书 在 编写 过 程 中 注重 “ 原 
理 ” 和 “实用 ”, 这 表现 在 所 有 的 实例 中 都 是 按照 其 涉及 的 原理 分 类 ,而 不 是 按照 应 用 的 领 
域 分 类 ,将 这 些 实例 编排 在 原理 讲解 之 后 ,就 能 使 读者 迅速 理解 原理 的 用 途 ,同时 由 于 加 
深 了 对 原理 的 理解 ,可 以 对 实例 举一反三 。 

在 测试 网 页 时 ,一 定 要 使 用 不 同 的 浏览 器 进行 测试 ,建议 读者 至 少 在 计算 机 上 安装 正 
和 Firefox 或 Orome) 两 种 浏览 器 ,这 不 仅 因为 制作 出 各 种 浏览 器 兼容 的 网 页 是 网 页 设计 的 
一 项 基本 要 求 , 更 重要 的 是 通过 分 析 不 同 浏览 器 的 显示 效果 可 以 对 网 页 设计 的 各 种 原理 
有 更 深入 的 理解 。 
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Internet 是 全 球 范围 的 互联 网 ,用 来 实现 资源 共享 与 通信 联络 。Internet 可 提供 很 多 
种 服务 ,如 信息 浏览 .电子 邮件 .文件 传输 .即时 通信 等 。 

WWW(World Wide Web ,简称 为 Web 或 “万 维 网 ”) 是 Internet 实现 信息 资源 共享 
的 主要 途径 。WWW 由 遍布 在 Internet 中 的 被 称 为 Web 服务 器 的 计算 机 组 成 , Web 服 
务 器 是 Internet 上 一 台 具 有 独立 IP 地 址 的 计算 机 ,用 来 存储 和 发 布 网 页 。 接 人 Internet 
的 计算 机 能 够 从 Web 服务 器 上 获取 信息 或 发 送信 息 给 Web 服务 器 ,其 本 质 是 通过 
HTTP 协议 传输 基于 超 文本 (Hypertext) 的 信息 。 

WWW 是 由 无 数 个 网 站 连接 而 成 的 页 面 式 网 络 信息 系统 ,通过 浏览 器 (Browser) 提 
供 一 种 友好 的 信息 查询 界面 (网 页 ) 供 用 户 浏览 查询 。WWW 之 所 以 能 够 流行 起 来 ,在 于 
它 有 以 下 几 个 特点 : 首先 ,WWW 具有 图 形 化 的 浏览 和 操作 界面 ,通过 超 文 本 可 以 将 图 
形 、 音 频 、 视 频 信息 集成 于 同一 个 页 面 中 ;其 次 .WWW 是 非常 易于 导航 的 ,只 要 单 击 超 链 
接 就 可 以 在 各 页 面 、 各 站 点 之 间 自 由 浏览 ;再 次 , WWW 与 平台 无 关 , 无 论 是 Windows、 
Linux 还 是 苹果 系统 ,都 可 以 访问 WWW 上 的 任何 信息 。 


1.1 初 识 网 页 设计 


如 果 将 WWW 看 成 是 Internet 上 的 一 座 大 型 图 书馆 ,网 站 就 像 图 书馆 中 的 一 本 书 ， 
而 网 页 便 是 书 中 的 一 页 。 


1.1.1 什么 是 网 页 


一 个 网 页 就 是 一 个 文件 ,存放 在 世界 某 处 的 一 台 Web 服务 器 中 。 

当 用 户 在 浏览 器 地 址 栏 输入 网 址 后 ,经 过 HTTP 协议 的 传输 ,网 页 就 会 被 传送 到 用 
户 的 计算 机 中 ,然后 通过 浏览 器 解释 网 页 的 内 容 ,再 展示 到 用 户 的 眼前 。 图 1-1 是 正 浏 
览 器 打开 的 网 页 。 在 浏览 器 窗口 中 , 右 击 ,执行 “查看 源 文件 ”命令 ,就 会 打开 一 个 纯 文 本 
文件 ,如 图 1-2 所 示 。 这 个 文本 文件 中 的 内 容 叫 作 HTML 代码 ,浏览 器 的 本 质 其 实 是 把 
HTML 代码 解释 成 用 户 所 看 到 的 网 页 的 工具 。 

HTML 是 HyperText Markup Language 的 缩写 ,直译 为 “ 超 文本 标记 语言 ”。 


e@_W.. 准 网 页 设计 与 PHP 








请 注意 ; 电子 商务 安全 
的 课件 进行 了 补充 ,主要 补 

















图 1-1 下 浏览 器 中 的 网 页 





<#DOCTYPE html PUBLIC “~-//W3C//DTD XHTML 1.8 
Transitional//EN" “http://www.w3.0rg/TR/xhtml1/DTD/xhtml1 
-transitional.dtd"> 

《html xnmlns="http://www.w3.0rg/1999/xhtml"> 

<head> 


margin: px auto; 


width:768px; 
background :HFFF url(xxwlzx/body_ bg.gif) repeat—x; 


font-size: 12px; 
color: #333333; 





图 1-2 网 页 的 源 文 件 


网 页 是 用 HTML 编写 的 一 种 纯 文本 文件 。 用 户 通过 浏览 器 所 看 到 的 包含 了 文字 、 
图 像 链接、 动画 和 声音 等 多 媒体 信息 的 每 个 网 页 ,其 实质 是 浏览 器 对 HTML 代码 进行 
了 解释 ,并 引用 相应 的 图 像 .动画 等 资源 文件 , 才 生 成 了 多 姿 多 彩 的 网 页 。 

但 是 ,一 个 网 页 并 不 是 一 个 单独 的 纯 文本 文件 ,网 页 中 显示 的 图 片 . 动 画 等 文件 都 是 
单独 存放 的 ,以 方便 多 个 网 页 引用 同一 张 图 片 ,这 和 Word 等 格式 的 文件 有 明显 区 别 。 


1.1.2 网 页 设计 的 两 个 基本 问题 


网 页 设计 是 艺术 与 技术 的 结合 。 从 艺术 的 角度 看 ,网 页 设计 的 本 质 是 一 种 平面 设计 ， 
就 像 出 黑板 报 、 设 计 书 的 封面 等 平面 设计 一 样 ,对 于 平面 设计 我 们 需要 考虑 两 个 基本 问 
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题 , 那 就 是 布局 和 配色 。 
1. 布局 


对 于 一 般 的 平面 设计 来 说 ,布局 就 是 将 有 限 的 视觉 元 素 进行 有 机 的 排列 组 合 , 将 理性 
思维 个 性 化 地 表现 出 来 。 网 页 设计 和 其 他 形式 的 平面 设计 相 比 ,有 相似 之 处 , 它 也 要 考虑 
网 页 的 版 式 设 计 问题 ,如 采用 何 种 形式 的 版 式 布 局 。 与 一 般 平 面 设 计 不 同 的 是 ,在 将 网 页 
效果 图 绘制 出 来 以 后 ,还 需要 用 技术 手段 (代码 ) 实 现 效果 图 中 的 布局 ,将 网 页 效果 图 转化 
成 真实 的 网 页 。 

将 网 页 的 版 式 和 网 页 效果 图 设计 出 来 后 ,就 可 用 以 下 方式 实现 网 页 的 布局 。 

(1) 表格 布局 : 将 网 页 元 素 装填 人 表格 内 实现 布局 :表格 相当 于 网 页 的 骨架 ,因此 表 
格 布局 的 步骤 是 先 画 表 格 ,再 往 表格 的 各 个 单元 格 中 填 内 容 ,这 些 内 容 可 以 是 文字 或 图 片 
等 一 切 网 页 元 素 。 

(2) DIV 十 CSS 布局 : 这 种 布局 形式 不 需要 额外 的 表格 做 网 页 的 骨架 , 它 是 利用 网 页 
中 每 个 元 素 自身 具有 的 “盒子 ”来 布局 .通过 对 元 素 的 盒子 进行 不 同 的 排列 和 柑 套 ,使 这 些 
盒子 在 网 页 上 以 合适 的 方式 排列 就 实现 了 网 页 的 布局 。 在 网 页 布局 技术 的 发 展 过 程 中 ， 
产生 了 Web 标准 的 讨论 ,Web 标准 倡导 使 用 DIV 十 CSS 来 布局 。 

(3) 框架 布局 : 将 浏览 器 窗口 分 割 成 几 部 分 ,每 部 分 放 一 个 不 同 的 网 页 ,这 是 很 古老 
的 一 种 布局 方式 ,现在 用 得 较 少 。 

网 页 设计 从 技术 角度 看 ,就 是 要 运用 各 种 语言 和 工具 解决 网 页 布局 和 美观 的 问题 ,所 
以 网 页 设计 中 很 多 技术 都 仅仅 是 为 了 使 网 页 看 起 来 更 美观 。 常 常会 为 了 网 页 中 一 些 细节 
效果 的 改善 ,而 花费 大 量 的 工作 量 , 这 体现 了 网 页 设计 师 追 求 完美 的 精神 。 


2. 配色 


网 页 的 色彩 是 树立 网 页 形象 的 关键 要 素 之 一 。 对 于 一 个 网 页 设计 作品 ,浏览 者 首先 
看 到 的 不 是 图 像 和 文字 ,而 是 色彩 搭配 ,在 看 到 色彩 的 一 瞬间 ,浏览 者 对 网 页 的 整体 印象 
就 确定 下 来 了 ,因此 说 色彩 决定 印象 。 一 个 成 功 的 网 页 作品 ,其 色彩 搭配 可 能 给 人 的 感觉 
是 自然 .洒脱 的 ,看 起 来 只 是 很 随意 的 几 种 颜色 搭配 在 一 起 ,其 实 是 经 过 了 设计 师 的 深思 
熟 虑 和 巧妙 构思 的 。 

对 于 初学 者 来 说 ,在 用 色 上 切忌 将 所 有 的 颜色 都 用 到 ,尽量 控制 在 三 种 色彩 以 内 ,并 
且 这 些 色彩 的 搭配 应 协调 。 而 且 一 般 不 要 用 纯色 ,灰色 适合 与 任何 颜色 搭配 。 
1.1.3 网 页 设计 语言 一 一 HTML 简介 

网 页 是 用 HTML 语言 编写 的 。HTML 作为 一 种 建立 网 页 文档 的 语言 , 它 用 标记 标 
明文 档 中 的 文本 及 图 像 等 各 种 元 素 ,指示 浏览 器 如 何 显 示 这 些 元 素 。HTML 具有 语言 的 
一 般 特征 。 所 谓语 言 , 是 一 种 符号 系统 ,具有 自己 的 词汇 (符号 ) 和 语法 (规则 )。 

所 谓 标 记 , 就 是 作 记 号 。 例 如 ,为 了 让 浏览 器 理解 某 段 内 容 的 含义 ,HTML 将 各 种 内 
容 写 在 标记 内 ,以 标明 其 含义 。 例 如 : 

< 标记 > 受 标记 影响 的 内 容 < /标记 > 
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这 就 和 我 们 写 文 章 时 用 粗 体 字 表示 文章 的 标题 .用 换行 空 两 格 表示 一 个 段落 类 似 ， 
HTML 是 用 一 对 二 hl 二 标记 把 文字 括 起 来 表示 这 些 字 是 一 级 标题 ,用 二 p 二 标记 把 一 段 
字 括 起 来 表示 这 是 一 个 段落 。 

所 谓 超 文 本 ,就 是 相 比 普通 文本 有 超越 的 地 方 . 如 超 文本 可 以 通过 超 链接 转 到 指定 的 
某 一 页 ,而 普通 文本 只 能 一 页 页 翻 。 超 文本 还 具有 图 像 .视频 .声音 等 元 素 , 这 些 都 是 普通 
文本 所 无 法 具有 的 。 

HTML 的 发 展 历程 如 图 1-3 所 示 , 它 是 SGML( 标 准 通用 标记 语言 ) 在 WWW 中 的 
应 用 。1999 年 HTML 4.01 发 布 ,是 HTML 最 成 熟 的 一 个 版 本 。HTML 4.01 后 的 一 个 
修订 版 本 是 XHTML 1. 0, 该 版 本 并 没有 引入 新 的 标记 或 属性 ,唯一 的 区 别 只 是 语法 更 加 
严格 ,但 XHTML 于 2009 年 被 W3C 放弃 , 转 而 发 布 了 新 的 HTML 5 标准 。 目 前 一 些 新 
版 本 的 浏览 器 已 开始 支持 HTML 5, 但 IE 10 以 下 版 本 的 浏览 器 对 HTML 5 的 支持 仍 很 











不 好 。 
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图 1-3 标记 语言 的 发 展 过 程 


HTML 语言 与 编程 语言 有 明显 不 同 . 首 先 它 不 是 一 种 计算 机 编程 语言 ,而 是 一 种 描 
述 文档 结构 的 语言 ,或 者 说 是 排版 语言 ;其 次 ,HTML 是 弱 语法 语言 ,随便 怎么 写 都 可 以 ， 
浏览 器 会 尽力 去 理解 执行 ,不 理解 的 按 原样 显示 ,而 编程 语言 是 严格 语法 的 语言 , 写 错 一 
点 点 计算 机 就 不 执行 ,报告 错误 ;最 后 ,HTML 语言 不 像 大 多 数 编程 语言 那样 需要 编译 成 
指令 后 执行 ,而 是 每 次 由 浏览 器 解释 执行 。 


1.1.4 网 页 制作 软件 


网 页 的 本 质 是 纯 文本 文件 ,因此 可 以 用 任何 文本 编辑 器 制作 网 页 ,但 这 样 必须 完全 手 
工 书写 HTML 代码 。 为 了 提高 网 页 制作 的 效率 ,人 们 一 般 借助 于 专业 的 网 页 开发 软件 
制作 网 页 ,它们 具有 “所 见 即 所 得 ”(what you see is what you get) 的 特点 ,可 以 不 用 手工 
书写 代码 ,通过 图 形 化 操作 界面 就 能 插入 各 种 网 页 元 素 , 如 图 像 、 表 格 、 超 链接 等 ,而 且 能 
在 设计 视图 中 实时 看 到 网 页 的 大 致 浏览 器 效果 。 目 前 流行 的 专业 网 页 开发 工具 主要 有 : 

(1) Adobe 公司 的 Dreamweaver CS6 。Dreamweaver( 本 书简 称 DW ) 的 中 文 含 义 是 
“ 织 梦 者 ”,DW 具有 操作 简捷 、 容 易 上 手 等 优点 ,是 目前 最 流行 的 网 页 制作 软件 。 

由 于 Dreamweaver CS 以 上 版 本 对 中 文 的 支持 不 太 好 , 且 设 置 站 点 和 预览 网 页 时 选 
项 过 多 ,建议 初学 者 可 以 使 用 经 典 版 本 Dreamweaver 8 进行 网 页 设计 学 习 。 

(2) Microsoft 的 Expression Web 4。 它 是 微软 开发 的 新 一 代 网 页 制作 软件 ,对 Web 
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标准 的 内 建 支持 ,使 其 能 帮助 开发 者 建立 跨 浏览 器 兼容 性 的 网 站 。 
虽然 这 些 软 件 都 具有 “所 见 即 所 得 ”的 网 页 制作 能 力 , 可 以 让 不 懂 HTML 语言 的 用 
户 也 能 制作 出 网 页 。 但 如 果 想 灵活 制作 精美 专业 的 网 页 ,很 多 时 候 还 是 需要 在 代码 视图 
中 手工 修改 代码 ,因此 学 习 网 页 的 代码 对 网 页 制作 水 平 的 提高 是 很 重要 的 。 
DW 等 软件 同时 具有 很 好 的 代码 提示 和 代码 标注 功能 ,使 得 手工 编写 和 修改 代码 也 
很 容易 ,并 且 还 能 报告 代码 错误 ,所 以 就 算是 手工 编写 代码 ,也 推荐 使 用 这 些 软件 。 

DW 和 Expression Web 同时 具有 强大 的 站 点 管理 功能 ,因此 它们 还 是 网 站 开发 工 
具 , 网 页 制作 和 网 站 管理 的 功能 被 集成 于 一 体 。 


1.2 网 站 的 创建 和 制作 流程 


网 站 就 是 由 许多 网 页 及 资源 文件 (如 图 片 ) 组 成 的 一 个 集合 ,网 页 是 构成 网 站 的 基本 
元 素 。 通 常 把 网 站 内 的 所 有 文件 都 放 在 一 个 文件 夹 中 ,所 以 网 站 从 形式 上 看 就 是 一 个 文 
件 夹 。 

设计 良好 的 网 站 通常 是 将 网 页 文件 及 其 他 资源 文件 分 门 别 类 地 保存 在 相应 的 目录 
中 ,以 方便 管理 和 维护 ,这些 网 页 通过 超 链接 组 织 在 一 起 ,图 1-4 是 一 个 网 站 目录 示意 图 。 
用 户 浏 览 网 站 时 ,看 到 的 第 一 个 网 页 称 为 主页 (也 叫 首页 ), 上 面 通 常设 有 网 站 导航 ,链接 
到 站 内 各 主要 网 页 ,其 名 称 一 般 是 index. htm 或 index. html, 必 须 放 在 网 站 的 根 目 录 下 ， 
即 网 站 目录 是 首页 文件 的 直接 上 级 目录 。 一 个 网 站 对 应 一 个 网 站 目录 ,所 以 网 站 目录 是 
唯一 的 。 
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图 1-4 网 站 目录 示意 图 





通常 在 网 站 目录 下 新 建 一 个 名 为 images 的 子 目录 ,用 于 保存 网 站 中 所 有 网 页 需要 调 
用 的 图 片 文件 。 

因此 ,制作 网 站 的 第 一 步 是 在 硬盘 上 新 建 一 个 目录 (如 D:\web), 作 为 网 站 目录 。 网 
站 制作 完成 后 将 这 个 目录 中 的 所 有 内 容 上 传 到 远程 服务 器 中 就 可 以 了 。 
1.2.1 网 站 的 特征 

从 用 户 的 角度 看 ,设计 良好 的 网 站 一 般 具 有 如 下 几 个 特征 : 
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(1) 拥有 众多 的 网 页 。 从 某 种 意义 上 说 ,建设 网 站 就 是 制作 网 页 ,网 站 主页 是 最 重要 
的 网 页 。 

(2) 拥有 一 个 主题 与 统一 的 风格 。 网 站 虽然 有 许多 网 页 ,但 作为 一 个 整体 , 它 必 须 有 
一 个 主题 和 统一 的 风格 。 所 有 的 内 容 都 要 围绕 这 个 主题 展开 ,和 主题 无 关 的 内 容 不 应 出 
现在 网 站 中 。 网 站 内 所 有 网 页 要 有 统一 的 风格 ,主页 是 网 站 的 首页 ,也 是 网 站 最 为 重要 的 
网 页 ,所 以 主页 的 风格 往往 决定 了 整个 网 站 的 风格 。 

(3) 有 便捷 的 导航 系统 。 导 航 是 网 站 非常 重要 的 组 成 部 分 ,也 是 衡量 网 站 是 否 优秀 
的 一 个 重要 标准 。 设 计 良 好 的 网 站 都 具有 便捷 的 导航 工具 ,可 以 帮助 用 户 以 最 快 的 速度 
找到 自己 需要 的 网 页 。 导 航 系统 常用 的 实现 方法 有 导航 条 .路径 导航 、 链 接 导 航 等 。 

(4) 分 层 的 栏目 组 织 。 将 网 站 的 内 容 分 成 若干 个 大 栏目 ,每 个 大 栏目 的 内 容 都 放置 
在 网 站 目录 下 的 一 个 子 目录 中 ,还 可 将 大 栏目 再 分 成 若干 小 栏目 ,也 可 将 小 栏目 分 成 若干 
个 更 小 的 栏目 ,都 分 门 别 类 放 在 相应 的 子 目录 下 ,这 就 是 网 站 采用 的 最 简单 的 层次 型 组 织 
结构 ,结构 清晰 的 网 站 可 大 大 方便 网 站 的 维护 和 管理 。 


1.2.2 网 站 的 开发 步骤 


网 站 开发 也 可 看 成 是 一 种 软件 开发 ,其 开发 过 程 可 分 为 前 期 工作 .中 期 工作 和 后 期 工 
作 。 尽 管 本 书 介绍 的 内 容 主要 是 中 期 工作 ,但 网 站 开发 的 前 期 工作 对 网 站 开发 的 成 功 与 
和 否 起 着 非常 关键 的 作用 。 


1. 网 站 需求 分 析 与 定位 


假设 为 一 家 单位 或 部 门 制作 网 站 , 则 需求 分 析 首 先是 需要 了 解 该 单位 的 主要 职能 。 
然后 结合 该 单位 的 实际 工作 需求 ,并 对 需求 进行 明确 和 细 化 ,确定 网 站 应 满足 的 设计 目标 
和 要 求 。 这 一 步 的 主要 任务 是 采集 和 提炼 用 户 需求 。 其 关键 是 ， 

(1) 明确 目标 ,和 弄 清楚 用 户 的 真正 需求 ; 

(2) 有 效 沟通 ,通常 用 户 的 需求 是 凌乱 的 ,不 完整 的 ,很 多 用 户 知道 自己 想 要 什么 ,但 
是 表达 不 出 来 。 这 需要 网 站 需求 分 析 人 员 深 入 企业 内 部 ,熟悉 用 户 的 业务 流程 。 


2. 确定 网 站 内 容 \ 风 格 和 功能 


网 站 内 容 主 要 来 源 于 建站 客户 提供 的 资料 , 若 客 户 提供 的 资料 较 少 ,可 以 参考 同类 网 
站 ,适当 丰富 一 些 内 容 。 若 客户 提供 的 资料 很 多 , 则 要 分 清 主 次 ,整理 分 类 ,不 要 全 部 放 在 
网 站 上 。 网 站 内 容 可 以 是 文字 、 图 表 、 图 片 . 动 画 、 视 频 等 多 种 格式 。 

网 站 风格 应 以 网 站 性 质 和 网 站 内 容 为 基础 ,例如 ,如 果 是 企 事 业 单 位 的 门户 网 站 , 则 
网 站 风格 应 以 简洁 端庄 为 宜 ;如 果 是 娱乐 .旅游 网 站 , 则 网 站 风格 可 偏向 活泼 。 网 站 风格 
成 功 的 关键 是 避免 雷同 和 过 分 修饰 ,即使 是 同一 类 型 的 网 站 ,也 应 该 有 自己 的 特点 、 自 己 
的 风格 。 

根据 用 户 的 需求 确定 网 站 的 功能 ,如 企业 网 站 应 具备 的 基本 功能 一 般 有 : 信息 发 布 
与 维护 、 信 息 查 询 、 留 言 本 、 网 上 订货 、 在 线 招聘 等 。 
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3. 规划 网 站 栏目 


根据 企 事业 单位 业务 的 侧重 点 ,结合 网 站 定位 来 确定 网 站 的 栏目 。 开始 时 可 能 会 因 
为 栏目 较 多 而 难以 确定 最 终 需 要 的 栏目 ,这 就 需要 展开 男 一 轮 讨论 ,需要 网 站 设计 人 员 和 
客户 在 一 起 阐述 自己 的 意见 ,一 起 反复 比较 ,将 确定 下 来 的 内 容 进行 归 类 ,从 而 确定 网 站 
的 一 级 栏目 ,然后 对 每 个 栏目 中 的 内 容 进行 细 化 确定 二 级 栏目 (甚至 三 级 栏目 ) 等 。 最 终 
形成 网 站 栏目 的 树 状 结构 ,用 来 清晰 表达 站 点 结构 。 


4. 设计 网 页 效果 图 和 切 图 


网 页 效果 图 在 设计 之 前 应 先 用 铅笔 勾勒 出 一 个 草图 ,草图 主要 是 对 版 面 进行 划分 , 确 
定 各 个 模块 在 网 页 中 的 大 体位 置 。 接 下 来 就 是 使 用 Photoshop 或 Fireworks 等 图 像 处 理 
软件 绘制 网 页 效果 图 ,这 一 步 的 核心 任务 是 美术 设计 ,通俗 地 说 ,就 是 让 页 面 更 美观 、 更 漂 
亮 。 在 一 些 比较 大 的 网 页 开发 项 目 中 ,通常 都 会 有 专业 的 美工 参与 ,这 一 步 就 是 美工 的 
任务 。 

通常 一 个 网 站 中 有 成 百 上 千 个 页 面 ,但 实际 上 不 必 为 每 个 页 面 都 设计 网 页 效果 图 , 因 
为 网 站 中 的 页 面 一 般 分 为 三 类 , 即 首页 ,栏目 首页 和 内 页 。 相 同类 型 的 页 面 ,其 布局 和 外 
观 都 是 相同 的 ,只 是 里 面 的 文字 信息 不 同 而 已 。 因 此 制作 网 页 效果 图 只 需要 分 别 制作 首 
页 ,栏目 首页 和 内 页 三 个 页 面 的 效果 图 。 我 们 一 般 都 是 先 制作 首页 的 效果 图 ,因为 首页 的 
效果 图 是 最 复杂 的 ,然后 再 对 首页 效果 图 的 中 间 区 域 进行 修改 ,制作 出 栏目 首页 和 内 页 的 
效果 图 。 如 果 要 制作 手机 版 网 站 ,还 需要 另外 设计 手机 网 站 的 首页 .栏目 首页 和 内 页 。 

为 了 让 网 站 有 整体 感 ,应 该 在 所 有 页 面 中 放置 一 些 贯 穿 性 的 元 素 , 即 在 网 站 的 所 有 页 
面 中 都 出 现 的 元 素 。 例 如 ,网 站 中 所 有 网 页 的 头 部 .导航 条 和 页 尾 都 是 相同 的 。 

网 页 效果 图 应 该 按照 真实 网 页 大 小 1 : 1 的 比例 制作 ,并 且 尽 量 提供 Fireworks 或 
Photoshop 中 图 层 未 合并 的 原始 文件 。 这 样 在 将 效果 图 转换 成 真实 的 网 页 时 才能 方便 地 
获得 背景 图 案 .各 个 模块 的 精确 大 小 、 在 页 面 中 的 位 置 及 文本 的 字体 大 小 .字体 类 型 等 
信息 。 

网 页 效果 图 制作 完成 后 ,还 必须 对 效果 图 进行 切片 ,因为 真实 的 网 页 并 非 一 张 图 
片 ,而 是 将 许多 小 图 片 放置 在 网 页 合适 的 位 置 上 。 网 页 切片 就 是 根据 网 页 的 需要 ,将 
有 用 的 图 片 从 网 页 效果 图 中 切 出 来 ,其 他 不 需要 的 图 片 (如 文字 块 区 域 . 单 色 背 景区 
域 ) 则 可 以 舍 去 ,然后 再 在 对 应 的 区 域 填充 文字 。 网 页 切片 需要 考虑 网 页 布局 采用 的 
技术 。 使 用 表格 布局 的 网 页 和 CSS 布局 的 网 页 其 需要 的 图 片 往 往 是 不 相同 的 ,因此 切 
片 方式 也 不 相同 。 

提示 : 虽然 有 些 简单 的 网 页 也 可 以 不 绘制 网 页 效果 图 ,而 是 分 别 制作 网 页 中 各 部 分 
的 图 片 ,再 把 它们 插入 网 页 中 对 应 的 位 置 上 。 但 这 样 做 的 缺点 也 是 相当 明显 的 : 由 于 各 
个 位 置 的 图 片 是 单独 绘制 的 ,容易 造成 网 页 整体 风格 不 统一 ,而 且 网 页 各 个 区 域 也 显得 是 
孤立 存在 的 ,过 渡 不 自然 。 因 此 要 制作 出 看 起 来 浑然 一 体高 水 平 的 网 页 作品 ,绘制 网 页 效 
果 图 是 不 可 省 略 的 步骤 。 
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5. 制作 静态 模板 页 面 


网 页 效果 图 设计 完成 后 , 接 下 来 就 是 根据 网 页 效果 图 设计 网 站 的 静态 模板 页 面 ,这 一 
步 的 要 求 是 制作 出 来 的 网 页 要 和 网 页 效果 图 尽量 完全 相似 。 网 页 制作 人 员 只 有 熟练 掌握 
网 页 布局 的 技巧 才能 完成 。 

静态 模板 页 面 的 制作 过 程 也 应 遵循 先 首页 .再 栏目 首页 .最 后 内 页 的 过 程 。 这 是 因为 
首页 最 复杂 ,并 且 首 页 中 的 很 多 网 页 元 素 可 以 提供 给 栏目 首页 和 内 页 重用 。 为 了 测试 静 
态 页 面 的 整体 效果 ,可 以 在 页 面 中 输入 一 些 无 关 文 字 。 在 将 页 面 转换 为 动态 页 面 时 , 青 将 
这 些 静 态 文字 转换 为 动态 字段 即 可 。 


6. 绑 定 动态 数据 和 实现 后 台 功 能 


目前 的 网 站 一 般 都 是 将 信息 保存 在 数据 库 中 的 动态 网 站 ,这 样 能 方便 地 添加 、 删 除 和 
修改 网 站 中 的 信息 。 这 一 步 的 任务 就 是 将 静态 模板 页 转换 为 动态 网 站 。 为 此 ,需要 由 程 
序 员 根据 功能 需求 来 编写 网 站 的 后 台 管理 程序 。 但 由 于 完全 自己 编写 后 台 程序 的 工作 量 
很 大 ,现在 更 流行 调用 一 个 通用 的 后 台 管 理 系统 (也 称 为 CMS(Content Management 
System) ,内 容 管理 系统 ) ,这 样 开发 程序 的 工作 量 就 小 多 了 。 

调用 后 台 管 理 系统 的 步骤 一 般 是 : 首先 在 后 台 管 理 系 统 中 添加 几 条 新 闻 记 录 ; 然 后 
打开 后 台 管 理 系 统 的 数据 库 查 看 标题 .内 容 等 字段 的 字段 名 ;最 后 在 前 台 的 静态 页 中 连接 
数据 库 并 绑 定 相关 内 容 对 应 的 字段 名 ,这 称 为 绑 定 动态 数据 ,这 样 前 台 页 面 就 可 以 显示 数 
据 库 中 的 内 容 了 ,而 后 台 管 理 系统 也 可 以 对 这 些 内 容 进行 添加 、 删 除 和 修改 。 


7. 整合 与 测试 网 站 


当 制 作 和 编程 工作 都 完成 以 后 ,就 需要 把 实现 各 种 功能 的 程序 和 页 面 进行 整合 。 整 
合 完成 后 ,需要 进行 内 部 测试 ,测试 成 功 后 即 可 将 网 站 目录 下 的 所 有 文件 上 传 到 服务 器 
上 ,上 传 服务 器 一 般 采 用 FTP 文件 传输 协议 上 传 。 

例如 ,假设 远程 服务 器 的 FTP 地 址 是 ftp://011. seavip. cn, 则 在 浏览 器 (或 
Windows 资源 管理 器 ) 的 地 址 栏 中 输入 FTP 地 址 ,这 时 会 弹出 “登录 身份 ”对话 框 要 求 输 
和 信用 户 名 和 密码 ,输入 正确 后 ,就 会 显示 一 个 类 似 于 资源 管理 器 的 界面 ,表示 远程 服务 器 
上 的 网 站 目录 ,把 本 机 网 站 目录 中 的 文件 通过 拖 动 复制 到 该 窗口 中 的 目录 下 就 实现 了 文 
件 上 传 , 还 可 以 对 远程 网 站 目录 中 的 文件 或 文件 夹 进行 删除 .新 建 等 操作 。 


1.2.3 在 Dreamweaver 中 建立 站 点 


在 Dreamweaver 中 ,“ 站 点 ”一 词 既 表示 网 站 ,又 表示 该 网 站 对 应 文件 夹 的 本 地 存储 
位 置 。 在 开始 建立 Web 站 点 之 前 ,我 们 需要 建立 站 点 文档 在 本 地 的 存储 位 置 ( 即 网 站 目 
录 )。Dreamweaver 站 点 可 组 织 与 Web 站 点 相关 的 所 有 文档 ,跟踪 和 维护 链接 、 管 理 文 
件 .共享 文件 以 及 将 站 点 文件 传输 到 Web 服务 器 上 。 

要 制作 一 个 能 够 被 访问 者 浏览 的 网 站 ,首先 需要 在 本 机 上 制作 网 站 ,然后 上 传 到 远 
程 服 务 器 。 放 置 在 本 地 磁盘 上 的 网 站 目录 被 称 为 “本 地 站 点 ”, 传 输 到 远程 Web 服务 器 
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中 的 网 站 被 称 为 “远程 站 点 ”。Dreamweaver 提供 了 对 本 地 站 点 和 远程 站 点 强大 的 管理 
功能 。 

因而 应 用 Dreamweaver 不 仅 可 以 创建 单独 的 网 页 ,还 可 以 创建 完整 的 网 站 。 使 用 
Dreamweaver 建立 网 站 时 ,首先 必须 告诉 Dreamweaver 本 地 站 点 对 应 于 哪个 硬盘 目录 ， 
即 把 我 们 在 硬盘 上 建立 的 网 站 主 目 录 定 义 为 Dreamweaver 的 站 点 。 因 此 在 
Dreamweaver 下 新 建站 点 是 用 Dreamweaver 开发 网 站 的 第 一 步 。 

提示 : 虽然 不 新 建站 点 也 可 以 使 用 Dreamweaver 编辑 单个 网 页 ,但 是 强烈 建议 初学 
者 在 制作 网 站 之 前 一 定 要 先 新 建站 点 ,因为 新 建站 点 之 后 : 

(1) 在 网 页 之 间 建 立 超 链接 时 ,Dreamweaver 能 使 站 点 内 的 网 页 以 相对 URL 的 方式 
进行 链接 ,这 种 形式 的 超 链接 代码 在 上 传 到 服务 器 后 也 无 须 做 任何 更 改 ; 

(2) 新 建 网 页 时 所 有 的 网 页 文件 都 会 自动 保存 在 站 点 目录 中 ,便于 管理 ; 

(3) 在 预览 动态 网 页 时 ,Dreamweaver 还 能 使 用 已 设置 好 的 URL 运行 该 动态 网 页 。 

下 面 介绍 在 Dreamweaver 中 新 建站 点 的 步骤 。 

(1) 启动 Dreamweaver, 在 Dreamweaver 中 执行 “站 点 ”>“ 新 建站 点 ”菜单 命令 ,就 会 
弹出 新 建站 点 对 话 框 。 这 个 对 话 框 分 为 “基本 ”和 “高 级 ”两 个 选项 卡 ,“ 基 本 ”选项 卡 可 分 
步骤 完成 一 个 站 点 的 建立 ,“ 高 级 ”选项 卡 则 是 用 来 直接 设置 站 点 的 各 个 属性 。 在 此 “ 基 
本 ”选项 卡 中 输入 站 点 的 名 称 ( 可 任 取 一 个 站 点 名 ,如 hynu) ,对 于 静态 站 点 ,HTTP 地 址 
不 需要 设置 ,如 图 1-5 所 示 。 











图 1-5 新 建站 点 对 话 框 (一 ) 


(2) 单 击 “ 下 一 步 ” 按 钮 ,在 弹出 的 如 图 1-6 所 示 的 对 话 框 中 选择 “ 否 ,我 不 想 使 用 服 
务 器 技术 .” 按 钮 ,此 对 话 框 用 于 设置 站 点 文件 类 型 。 如 果 要 制作 动态 网 页 , 则 应 选择 “是 ， 
我 想 使 用 服务 器 技术 .” 按 钮 ,此 时 将 出 现 一 个 选择 具体 动态 网 页 技术 的 下 拉 列 表 框 ,可 选 
择 需 要 的 动态 网 页 技术 。 

(3) 单 击 " 下 一 步 " 按 钮 ,弹出 如 图 1-7 所 示 的 对 话 框 ,因为 通常 我 们 都 是 在 本 地 机 器 
上 做 好 网 站 ,再 上 传 到 远程 的 服务 器 去 ,所 以 选择 “编辑 我 的 计算 机 上 的 本 地 副本 ,完成 后 
再 上 传 到 服务 器 (推荐 )” 这 一 默认 选项 。 
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hyna 的 站 点 定义 为 
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图 1-6 新 建站 点 对 话 框 (二 ) 


对 于 选项 “您 将 把 文件 存储 在 计算 机 上 的 什么 位 置 ?”, 显 然 ,我 们 应 该 把 制作 的 网 页 
保存 在 网 站 主 目录 中 。 因 此 ,这 里 应 该 输入 (或 选择 ) 网 站 主 目录 的 路 径 。 

当 把 已 经 新 建 好 的 网 站 主 目录 作为 Dreamweaver 的 站 点 后 ,Dreamweaver 就 会 把 以 
后 新 建 的 网 页 文件 默认 都 保存 在 该 站 点 目录 中 ,并 且 站 点 目录 内 ,网 页 之 间 的 链接 会 使 用 
相对 链接 的 方式 。 
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图 1-7 新 建站 点 对 话 框 (三 ) 


提示 : 对 网 站 目录 和 网 页 文件 命名 应 避免 使 用 中 文 ,尤其 对 于 动态 网 页 或 将 网 页 上 
传 到 服务 器 后 ,使 用 中 文 很 容易 出 问题 。 例 如 图 1-7 中 站 点 目录 “DEMO” 就 不 是 中 文 。 

(4) 单 击 “ 下 一 步 "按钮 ,在 “您 如 何 连接 到 远程 服务 器 ?” 下 
拉 列 表 框 中 选择 “无 ”选项 。 

(5) 单 击 * 下 一 步 "按钮 ,弹出 站 点 信息 总 结 的 对 话 框 , 单 击 
“完成 "按钮 就 完成 了 一 个 本 地 站 点 的 定义 。 C10 避 

(6) 定义 好 本 地 站 点 之 后 ,Dreamweaver 窗口 右 侧 的 “ 文 
件 "面板 ( 见 图 1-8) 就 会 显示 刚才 定义 的 站 点 的 目录 结构 ,可 以 
在 此 面板 中 右 击 ,通过 快捷 菜单 命令 在 站 点 目录 内 新 建文 件 或 
子 目 录 , 这 与 通过 资源 管理 器 在 网 站 目录 中 新 建文 件 或 目录 的 
效果 是 一 样 的 。 

如 果 要 修改 定义 好 的 站 点 ,只 需 执行 “站 点 习 管 理 站 点 " 菜 。 图 13 “文件 "面板 
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单 命令 ,选中 要 修改 的 站 点 名 , 单 击 “ 编 辑 ” 按 钮 ,就 可 在 站 点 定义 对 话 框 中 对 原来 的 设置 
进行 修改 。 


1.3 ”Web 服务 器 与 浏览 器 


在 学 习 网 页 制作 之 前 ,有 必要 了 解 “ 浏 览 器 "和 “服务 器 ”的 概念 。 网 站 浏览 者 坐 在 计 
算 机 前 浏览 各 个 网 站 上 的 内 容 , 实 质 上 是 从 远程 的 计算 机 中 读 取 了 一 些 内 容 , 然 后 在 本 地 
的 计算 机 中 显示 出 来 的 过 程 。 提 供 内 容 信息 的 远程 计算 机 称 为 "服务 器 ”, 浏 览 者 使 用 的 
本 地 计算 机 称 为 "客户 端 ”, 客 户 端 使 用 "浏览 器 ?程序 ,就 可 以 通过 网 络 接收 到 "服务 器 ”上 
的 网 页 以 及 其 他 文件 ,因此 我 们 浏览 的 网 页 是 保存 在 服务 器 上 的 ,服务 器 可 以 同时 供 许多 
不 同 的 客户 端 访 问 。 


1.3.1 Web 服务 器 的 作用 


访问 网 页 具体 的 过 程 是 : 当 用 户 的 计算 机 连 入 互联 网 后 ,通过 在 浏览 器 中 输入 网 址 
发 出 访问 某 个 网 站 的 请 求 ,然后 这 个 网 站 的 服务 器 就 
把 用 户 请 求 的 网 页 文件 传送 到 用 户 的 浏览 器 中 ,即将 
文件 下 载 到 用 户 计算 机 中 ,浏览 器 再 解析 并 显示 网 页 
文件 内 容 , 这 个 过 程 如 图 1-9 所 示 。 

对 于 静态 网 页 (不 含有 服务 器 端 代码 ,不 需要 Web 
服务 器 解释 执行 的 网 页 ) 来 说 ，Web 服务 器 只 是 到 服 
务 器 的 硬盘 中 找到 该 网 页 并 发 送 给 用 户 计算 机 ,起 到 
的 只 是 查找 和 传输 文件 的 作用 。 因 此 在 测试 静态 网 页 
时 可 不 安装 Web 服务 器 ,因为 制作 网 页 时 网 页 还 保存 
在 本 地 计算 机 中 ,可 以 手工 找到 该 网 页 所 在 的 目录 , 双 
击 网 页 文件 就 能 用 浏览 器 打开 它 。 


1.3.2 浏览 器 的 种 类 和 作用 


浏览 器 是 供用 户 浏览 网 页 的 软件 ,其 功能 是 读 取 HTML 等 网 页 代码 并 进行 解释 以 
生成 用 户 看 到 的 网 页 。 








浏览 器 浏览 器 
图 1-9 服务 器 与 浏览 器 之 间 的 关系 


1. 浏览 器 的 种 类 


浏览 器 的 种 类 很 多 ,目前 常见 的 浏览 器 有 : IE 6 一 IE 11、Firefox 30、Google Chrome 
2、Safari 5、Opera 10 等 。 图 1-10 是 各 种 浏览 器 的 徽标 。 

(1) IE(Internet Explorer) 是 Windows 操作 系统 自 带 的 浏览 器 ,也 是 国内 使 用 最 广 
泛 的 浏览 器 。 目 前 常用 的 下 浏览 器 版 本 很 多 ,从 IE6 到 IE11 都 有 ,各 种 版 本 的 I 浏览 
器 对 网 页 的 解析 区 别 又 很 大 。 其 中 IE 6 对 Web 标准 的 支持 不 太 好 ,并 存在 一 些 明显 的 
bug, 而 IE 8 开始 对 Web 标准 的 支持 得 到 了 显著 改善 。 从 IE 9 开始 ,IE 浏览 器 逐步 支持 
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IE Firefox Opera Safari Google Chrome 
图 1-10 各 种 常见 的 浏览 器 








HTML 5 和 CSS 3 版 本 。 由 于 IE 6 仍然 是 Windows XP 默认 的 浏览 器 ,因此 在 制作 网 页 
时 ,仍然 要 考虑 代码 在 IE 6 浏览 器 上 的 兼容 性 。 

(2) Google Chrome 是 浏览 器 市 场 的 后 起 之 秀 ,该 浏览 器 具有 运行 速度 快 ,占用 资源 
少 的 特点 ,目前 其 市 场 占有 率 快 速 提高 ,预计 将 会 成 为 一 种 最 流行 的 浏览 器 。 

(3) Firefox 是 网 页 设计 领域 推荐 的 标准 浏览 器 , 它 对 Web 标准 和 CSS 有 很 好 的 支 
持 , 并 且 是 最 先 支 持 HTML 5 的 浏览 器 。 

(4) Safari 5 最 初 是 苹果 电脑 (包括 iPad iPhone) 上 的 浏览 器 ,目前 Safari 也 有 
Windows 版 本 ,该 浏览 器 解释 JavaScript 脚本 的 速度 很 快 。 

(5) Opera 10 是 一 款 小 巧 的 浏览 器 ,在 手持 设备 的 操作 系统 上 用 得 较 多 。 

目前 网 页 在 各 种 浏览 器 中 的 显示 效果 有 时 还 不 完全 相同 , 随 着 Web 标准 的 推广 , 按 
照 Web 标准 制作 的 网 页 在 各 种 浏览 器 中 的 显示 效果 将 趋 于 一 致 。 


2. 浏览 器 的 作用 


浏览 器 最 重要 或 者 说 核心 的 部 分 是 Rendering Engine, 习 惯 上 称 之 为 浏览 器 内 核 , 负 
责 对 网 页 语法 的 解释 (包括 HTML、CSS、JavaScript) 并 显示 网 页 。 

浏览 器 解释 网 页 代码 的 过 程 类 似 于 程序 编译 器 编译 程序 源 代码 的 过 程 ,都 是 通过 执 
行 代 码 (HTML 代码 或 程序 代码 ) 再 生成 界面 (网 页 或 应 用 程序 界面 ) ,不 同 的 是 浏览 器 对 
HTML 等 代码 是 解释 执行 的 。 不 同 的 浏览 器 内 核对 网 页 代码 的 解释 并 不 完全 相同 ,因此 
同一 网 页 在 不 同 内 核 的 浏览 器 中 的 显示 效果 就 有 可 能 不 同 。 作 为 网 页 制作 者 ,应 追求 网 
页 尽 可 能 在 各 种 浏览 器 中 有 一 致 的 显示 效果 。 建 议 测试 网 页 时 至 少 应 将 网 页 在 IE 8 和 
Google Chrome 两 种 浏览 器 上 运行 一 遍 , 以 测试 网 页 的 浏览 器 兼容 性 。 


1.4 URL 与 域名 


1. URL 的 含义 和 格式 


当 用 户 使 用 浏览 器 访问 网 站 时 ,通常 需要 在 浏览 器 地 址 栏 中 输入 网 站 地 址 (网 址 ) ,这 
个 地 址 就 是 URL (Universal Resource Locator, 统 一 资源 定位 器 )。URL 信息 会 通过 
HTTP 请 求 发 送 给 服务 器 ,服务 器 根据 URL 信息 返回 对 应 的 资源 文件 到 浏览 器 。 

URL 是 Internet 上 任何 资源 的 标准 地 址 ,为 了 使 人 们 能 访问 Internet 上 任意 一 个 网 
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页 (或 其 他 文件 ) ,每 个 网 站 上 的 每 个 网 页 (或 资源 文件 ) 在 Internet 上 都 有 一 个 唯一 的 
URL 地 址 ,通过 网 页 的 URL, 浏 览 器 就 能 定位 到 目标 网 页 或 资源 文件 。 就 好 像 邮寄 信件 
时 通过 地 址 和 姓名 就 能 让 邮局 定位 到 收 信人 一 样 。 
URL 的 一 般 格式 如 下 ,图 1-11 是 一 个 URL 的 示例 。 


协议 名 :// 主 机 名 [: 端 口号 ][/ 目 录 路 径 / 文 件 名 ] [# 锚 点 名 ] 
URL 协议 名 后 必须 接 “://”, 其 他 各 项 之 间 用 协议 名 主机 名 (域名 ) 


“/” 隔 开 , 例 如 图 1-11 中 的 URL 表示 信息 被 放 在 | 
一 台 被 称 为 www 的 服务 器 上 ,hynu. cn 是 一 个 已 httpy/(Wwwhynucn)/web/201609/first.html 


被 注册 的 域名 ,cn 表示 中 国 。 有 时 也 把 主机 名 和 域 
名 合 称 为 主机 名 (或 主机 头 、 域 名 )。 域 名 对 应 服务 主机 名 域名 。 目录 路 径 ”文件 名 
器 上 的 网 站 目录 (如 D:\hynu),web/201609/ 是 服 图 1-11 URL 的 格式 示例 
务 器 网 站 目录 下 的 目录 路 径 ,而 first. html 是 位 于 
上 述 目录 下 的 文件 名 ,因此 该 URL 能 够 让 我 们 访问 到 这 个 文件 。 

在 URL 中 ,常见 的 协议 名 有 如 下 三 种 : 

(1) http 一 一 超 文本 传输 协议 ,用 于 传送 网 页 。 

(2) ftp 一 一 文件 传输 协议 ,用 于 传送 文件 。 

(3) file 一 一 访问 某 台 主机 上 共享 文件 的 协议 。 如 果 访 问 的 是 本 机 , 则 主机 头 可 以 省 
略 ,但 和 斜 杠 不 能 省 略 。 

下 面 是 几 个 URL 的 例子 。 

















http://ktbs .rnsky.coam:8080/bbs/forumdisplay.phpt fid 
ftp://219.216.128.15/ 
file:///pub/files/fodbar.txt 


2. 域名 与 主机 的 关系 


在 URL 中 ,主机 名 通常 是 域名 或 IP 地 址 。 最 初 ,域名 是 为 了 方便 人 们 记忆 IP 地 址 
的 ,使 用 户 在 URL 中 可 以 输入 域名 而 不 必 输 入 难 记 的 IP 地 址 。 但 现在 多 个 域名 可 对 应 
一 个 IP 地 址 (一 台 主 机 ), 即 在 一 台 主 机 上 可 架设 多 个 网 站 ,这 些 网 站 的 存放 方式 称 为 “ 虚 
拟 主机 ”方式 ,此 时 由 于 一 个 IP 地 址 (一 台 主 机 ) 对 应 多 个 网 站 ,就 不 能 采用 输入 IP 地 址 
的 方式 访问 网 站 ,而 只 能 在 URL 中 输入 域名 。Web 服务 器 为 了 区 别 用 户 请 求 的 是 这 台 
主机 上 的 哪个 网 站 ,通常 必须 为 每 个 网 站 设置 “主机 头 ” 来 区 别 这 些 网 站 。 

因此 域名 的 作用 有 两 个 : 一 是 将 域名 发 送 给 DNS 服务 器 解析 得 到 域名 对 应 的 IP 地 
址 以 便 与 该 IP 对 应 的 服务 器 进行 通信 ;二 是 将 域名 信息 发 送 给 Web 服务 器 ,通过 域名 与 
Web 服务 器 上 设置 的 “主机 头 ” 进 行 匹配 确认 客户 端 请 求 的 是 哪个 网 站 ,如 图 1-12 所 示 。 
车 客户 端 没有 发 送 域名 信息 给 Web 服务 器 ,例如 直接 输入 IP, 则 Web 服务 器 将 打开 服务 
右上 的 默认 网 站 。 
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发 送 域名 : ec.hynu.cn 
| | 返回 IP 地 址 : 59.51.24.36 
已 DNS 服务 器 


浏览 器 连接 59.51.24.36， 发 送 























域名 信息 ec.hynu.cn 








将 主机 头 为 ec.hynu.cn 对 应 
的 网 站 发 送 给 浏览 器 Web 服 务 器 


图 1-12 浏览 器 输入 域名 访问 网 站 的 过 程 





习题 1 
1. 对 于 采用 虚拟 主机 方式 的 多 个 网 站 ,域名 和 IP 地址 是 ( ) 的 关系 。 
A. 一 对 多 B. 一 对 一 C. 多 对 一 D. 多 对 多 
2. 网 页 的 本 质 是 ( ) 文 件 。 
A. 图 像 B. 纯 文本 
C. 可 执行 程序 D. 图 像 和 文本 的 压缩 


. 请 解释 http://www. moe. gov. cn/business/moe/115078. html 的 含义 。 

. 简 述 WWW 和 Internet 的 区 别 。 

. 简 述 URL 的 含义 和 作用 。 

. 简 述 网 站 的 本 质 和 特点 。 

. 使 用 Dreamweaver 新 建 名 为 “aiw” 的 站 点 ,该 站 点 对 应 硬盘 上 的 “D:\aiw” 网 站 文 


~ 中 on 心中 


件 夹 。 
8. 在 计算 机 安装 Firefox 浏览 器 ,并 分 别 使 用 IE 浏览 器 和 Firefox 浏览 器 查看 网 页 
的 源 代码 。 








© 


网 页 是 用 HTML(HyperText Markup Language) 语 言 编 写 的 ,HTML 是 所 有 网 页 
制作 技术 的 基础 。 无 论 是 在 Web 上 发 布 信 息 , 还 是 编写 可 供 交 互 的 程序 ,都 离 不 开 
HTML 语言 。 


2.1 HTML 概述 


HTML, 即 超 文 本 标记 语言 。 网 页 是 用 HTML 书写 的 一 种 纯 文本 文件 。 用 户 通 过 
浏览 器 所 看 到 的 包含 了 文字 、 图 像 .动画 等 多 媒体 信息 的 每 一 个 网 页 ,其 实质 是 浏览 器 对 
该 纯 文 本 文件 进行 了 解释 ,并 引用 相应 的 图 像 .动画 等 资源 文件 , 才 生 成 了 多 姿 多 彩 的 
网 页 。 

HTML 是 一 种 标记 语言 。 可 以 认为 ,HTML 代码 就 是 “普通 文本 十 HTML 标记 ”， 
而 不 同 的 HTML 标记 能 表达 不 同 的 效果 ,如 表格 、 图 像 .表单 ,文字 等 。 


2.1.1 HTML 文档 的 结构 


HTML 文件 本 质 是 一 个 纯 文本 文件 ,只 是 它 的 扩展 名 为 . htm 或 . html。 任 何 纯 文本 
编辑 软件 都 能 创建 HTML 文件 。 图 2-1 是 HTML 文档 的 基本 结构 。 


<html> 
广 一 <head> 
[@) <title> 第 一 个 网 页 </title> 
— </head> 

© — <body> 
欢迎 学 习 网 页 设计 

一 </body> 

</html> 








回 








@ 





图 2-1 HTML 文档 的 基本 结构 


从 图 2-1 可 以 看 出 ,HTML 代码 分 为 3 部 分 ,其 中 各 部 分 含义 如 下 : 

(1) 二 html 盖 …</html 二 : 告诉 浏览 器 HTML 文档 的 开始 和 结束 位 置 ,HTML 文 
档 包 括 head 部 分 和 body 部 分 。HTML 文档 中 所 有 的 内 容 都 应 该 在 这 两 个 标记 之 间 ,一 
个 HTML 文档 总 是 以 天 html> 开 始 ,以 一 /html 二 结束 。 
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(2) <head>…</head 之 : HTML 文档 的 头 部 标记 , 头 部 主要 提供 文档 的 描述 信息 ， 
head 部 分 的 所 有 内 容 都 不 会 显示 在 浏览 器 窗口 中 ,在 其 中 可 以 放置 页 面 的 标题 一 title 之 以 
及 页 面 的 类 型 .字符 编码 .链接 的 其 他 脚本 或 样式 文件 等 内 容 。 

(3) <<title 盖 …< 一 /title 之 : 定义 页 面 的 标题 ,将 显示 在 浏览 器 的 标题 栏 中 。 

(4) <<body 二 … 志 /body 过: 用 来 指明 文档 的 主体 区 域 ,主体 包含 Web 浏览 器 页 面 
显示 的 具体 内 容 , 因 此 网 页 所 要 显示 的 内 容 都 应 放 在 这 个 标记 内 。 

提示 : HTML 标记 之 间 只 可 以 相互 工 套 ,如 所 head 二 <title 之 …</title 之 一 /head>， 
但 绝 不 可 以 相互 交错 ,如 二 head 二 到 title 之 …< 王 /head 过 
二 /title 二 就 是 绝对 错误 的 。 

我 们 可 以 打开 最 简单 的 文本 编辑 器 一 一 记事 本 ,在 记事 
本 中 输入 图 2-1 中 的 代码 。 输 入 完成 后 , 单 击 “ 保 存 ” 菜 单 命 
令 ,注意 先 在 “保存 类 型 "中 选择 “所 有 文件 ”, 再 输入 文件 名 为 
“2-1. html”。 单 击 "保存 "按钮 ,就 新 建 了 一 个 后 组 名 为 . html 图 ?2 2.1.html 在 浏览 
的 网 页 文件 ,可 以 看 到 其 文件 图 标 为 浏览 器 图 标 ,双击 该 文 器 中 的 显示 效果 
件 , 会 用 浏览 器 显示 如 图 2-2 所 示 的 网 页 。 


2.1.2 Dreamweaver 的 开发 界面 


Dreamweaver 为 网 页 制作 提供 了 简洁 友好 的 开发 环境 ,Dreamweaver 的 工作 界面 包 
括 视 图 窗口 .属性 窗口 .工具 栏 和 浮动 面板 组 等 ,如 图 2-3 所 示 。 


3 - [Vntitled-1 CXNTEL)] 














2-3 ”Dreamweaver CS3 的 工作 界面 


Dreamweaver 的 视图 窗口 可 在 “设计 视图 “代码 视图 ”和 *“ 拆 分 视图 ”之 间 切 换 。 
(1)“ 设 计 视 图 ”的 作用 是 帮助 用 户 以 “所 见 即 所 得 ”的 方式 编写 HTML 代码 , 即 通过 
一 些 可 视 化 的 方式 自动 编写 代码 ,减少 用 户 手工 书写 代码 的 工作 量 。Dreamweaver 的 设 
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计 视 图 蕴含 了 面向 对 象 操作 的 思想 , 它 把 所 有 的 网 页 元 素 都 看 成 是 对 象 ,在 设计 视图 中 编 
写 HTML 的 过 程 就 是 插入 网 页 元 素 , 再 设置 网 页 元 素 的 属性 。 

(2)“ 代 码 视 图 ?供用 户 手工 编写 或 修改 代码 ,因为 在 网 页 制作 过 程 中 ,有 些 操作 不 能 
(或 不 方便 ) 在 设计 视图 中 完成 ,此 时 用 户 可 单 击 “ 代 码 ” 按 钮 ,切换 到 代码 视图 直接 书写 代 
码 ,代码 视 图 拥有 代码 提示 的 功能 ,即使 是 手工 编写 代码 ,速度 也 很 快 。 

(3)“ 拆 分 视图 ”同时 显示 设计 视图 和 代码 视图 ,在 用 户 需要 寻找 代码 与 对 应 的 网 页 
区 域 时 可 切换 到 这 种 视图 。 

为 了 提高 网 页 制作 的 效率 ,建议 用 户 首先 在 “设计 视图 ”中 插入 主要 的 HTML 元 素 
(尤其 是 像 列表 、 表 格 或 表单 等 复杂 的 元 素 ) ,然后 切换 到 “代码 视图 ”对 代码 的 细节 进行 
修改 。 

注意 : 由 于 网 页 本 质 上 是 HTML 代码 ,在 设计 视图 中 的 可 视 化 操作 实质 上 仍然 是 纺 
写 代 码 。 因 此 可 以 在 设计 视图 中 完成 的 工作 一 定 也 可 以 在 代码 视图 中 完成 ,也 就 是 说 纺 
写 代码 方式 制作 网 页 是 万 能 的 ,因此 要 重视 对 HTML 代码 的 学 习 。 


2.1.3 使 用 Dreamweaver 新 建 HTML 文件 


打开 Dreamweaver, 在 “文件 "菜单 中 选择 “新 建 "命令 (快捷 键 为 Ctrl 十 N) ,在 新 建文 
档 对 话 框 中 选择 “基本 页 ”一 HTML 选项 , 单 击 “ 创 建 " 按 钮 就 会 出 现 网 页 的 设计 视图 。 在 
设计 视图 中 可 输入 网 页 内 容 , 然 后 保存 文件 (“文件 ”>“ 保 存 ” 菜 单 命令 ,快捷 键 为 Ctrl 十 
S, 第 一 次 保存 时 要 求 输入 网 页 的 文件 名 ) ,就 新 建 了 一 个 HTML 文件 ,最 后 可 以 按 F12 
键 在 浏览 器 中 预览 网 页 ,也 可 以 在 保存 的 文件 夹 中 找到 该 文件 双击 运行 。 

注意 : 网 页 在 Dreamweaver 设计 视图 中 的 效果 和 浏览 器 中 显示 的 效果 并 不 完全 相 
同 , 所 以 测试 网 页 时 应 按 F12 键 在 浏览 器 中 预览 最 终 效果 。 


2.1.4 HTML 标记 
标记 (tags, 也 称 标签 ) 是 HTML 文档 中 一 些 有 特定 意义 的 符号 ,这 些 符号 用 来 指明 





内 容 的 含义 或 结构 。HTML 标记 由 一 对 尖 括 号 “二 二 ”和 标 元 素 
记名 组 成 。 标 记分 为 “起 始 标 记 ” 和 “结束 标记 ”两 种 。 两 者 es 


<b> 标 记 的 内 容 </b> 
的 标记 名 是 相同 的 ,只 是 结束 标记 和 名 前 多 了 一 个 “/”。 例 如 I 


在 图 2-4 中 ,二 b 二 为 起 始 标记 ,二 /b 二 为 结束 标记 ,其 中 “b” 
是 标记 名 称 , 表 示 内 容 为 粗 体 。HTML 标记 名 是 大 小 写 不 
敏感 的 。 例 如 ,一 b>…</b 之 和 二 B 二 …</B> 的 效果 都 是 
一 样 的 ,但 是 XHTML 标准 规定 ,标记 名 必须 小 写 , 因 此 应 注意 用 小 写字 母 书写 。 


1. 单 标记 和 双 标 记 


起 始 标记 结束 标记 
图 2-4 HTML 的 标记 结构 


大 多 数 标记 都 是 成 对 出 现 的 , 称 为 双 标 记 , 如 所 p 盖 …</p 二 .<<table 之 …</table>。 
有 少数 标记 只 有 起 始 标 记 , 这 样 的 标记 称 为 单 标记 ,如 换行 标记 二 br />, 其 中 br 是 标记 
名 , 它 是 英文 “break row”( 换 行 ) 的 缩写 。XHTML 规定 单 标 记 也 必须 封闭 ,因此 在 单 标 
记名 后 应 以 斜 杠 结束 。 
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2. 标记 带 有 属性 时 的 结构 
实际 上 ,标记 一 般 还 可 以 带 有 若干 属性 (attribute) ,属性 用 来 对 元 素 的 特征 进行 具体 


描述 。 属 性 只 能 放 在 起 始 标记 中 ,属性 和 属性 之 间 
用 空格 隔 开 , 属 性 包括 属性 名 和 属性 值 C(value) , 它 
们 之 间 用 "* 王 ? 分 开 , 如 图 2-5 所 示 。 

例 2.1 讨论 下 列 HTML 标记 的 写法 错 在 什 
么 地 方 ? (答案 略 ) 

(1) <img "birthday. jpg " /> 

(2) =i> Congratulations! =i> 

















(3) <a href="file. html"> linked text</a 多 个 属性 之 间 用 空格 分 隔 
bvef = "tie, hail 图 2-5 带 有 属性 的 HTML 标记 结构 


(4) <p>This is a new paragraph<=\p> 

(5) <li>The list item</li> 

提示 : 把 HTML 标记 (如 所 p 二 .一 /p 二 ) 和 标记 之 间 的 内 容 的 组 合 称 为 HTML 元 
素 。HTML 元 素 可 分 为 “有 内 容 的 元 素 ”" 和 “ 空 元 素 ” 两 种 。“ 有 内 容 的 元 素 ” 是 由 起 始 标 
记 、 结 束 标记 和 两 者 之 间 的 内 容 组 成 的 ,其 中 元 素 内 容 既 可 以 是 文字 内 容 , 也 可 以 是 其 他 
元 素 。“ 空 元 素 " 是 只 有 起 始 标记 而 没有 结束 标记 和 元 素 内 容 的 元 素 , 如 所 br /二 。 


2.1.5 常见 的 HTML 标记 及 属性 


网 页 中 的 文本 、 图 像 、 超 链接 、 表 格 等 各 种 元 素 ,其 实质 上 都 是 使 用 对 应 的 HTML 标 
记 实 现 的 。 要 在 网 页 中 添加 各 种 网 页 元 素 , 只 要 在 HTML 代码 中 插入 对 应 的 HTML 标记 
并 设置 属性 即 可 。HTML 5 中 定义 的 标记 总 共有 100 多 个 ,但 是 常用 的 HTML 标记 只 有 下 
面 列 出 的 40 多 个 ,这 些 标记 及 其 含义 必须 熟 记 下 来 。 表 2-1 对 标记 按 用 途 进行 了 分 类 。 


表 2-1 HTML 标记 的 分 类 



































类 别 标记 名 称 
文档 结构 html, head, body 
头 部 标记 title, meta, link, style, script. base 
文本 结构 标记 p,hl 一 h6 ,pre,marquee,br,hr 
字体 标记 font,b,i,u,strong,em 
列表 标记 ul,ol,li,dl,dt,dd 
超 链接 标记 avmap,area 
图 像 及 媒体 元 素 标记 img,embed,object 
表格 标记 table,tr, td, th,tbody 
表单 标记 form,input, textarea, select,option, fieldset, legend ,label 
容器 标记 div, span 
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HTML 语言 还 为 标记 定义 了 许多 的 属性 ,有 些 属性 是 可 以 用 在 任何 标记 中 的 , 称 为 
公共 属性 ;而 大 部 分 属性 是 某 些 标记 独 有 的 , 称 为 特有 属性 。 表 2-2 列 出 了 所 有 HTML 
标记 具有 的 公共 属性 和 某 些 标记 的 特有 属性 。 

表 2-2 HTML 标记 的 一 些 常见 的 属性 





























公共 属性 含义 特有 属性 含义 
style “| 为 元 素 引 入 行内 CSS 样式 align ”| 定义 元 素 的 水 平 对 齐 方式 
class “| 为 元 素 定义 一 个 类 名 Src 定义 元 素 引 用 的 文件 的 URL 
id 为 元 素 定义 一 个 唯一 的 id 名 href 定义 超 链接 所 指向 的 文件 的 URL 
name ”| 为 元 素 定义 一 个 名 字 target | 定义 超 链接 中 目标 文件 的 打开 方式 
title 定义 鼠标 悬 停 在 元 素 上 时 的 提示 文字 ‖ border | 设置 元 素 的 边框 宽度 


2.2 在 网 页 中 添加 文本 和 图 像 


在 网 页 中 ,文本 和 图 像 是 最 基本 的 两 种 网 页 元 素 , 文 本 和 图 像 在 网 页 中 可 以 起 到 传递 
信息 ,美化 页 面 \ 点 明 主 题 等 作用 。 在 网 页 中 添加 文本 和 图 像 并 不 难 ,主要 问题 是 如 何 编 
排 这些 内 容 以 及 控制 它们 的 显示 方式 ,让 文本 和 图 像 看 上 去 编排 有 序 ,整齐 美观 。 

要 在 网 页 中 添加 文本 、 图 像 等 各 种 网 页 元 素 ,只 要 在 HTML 代码 中 插入 对 应 的 
HTML 标记 并 设置 属性 和 内 容 即 可 。 


2.2.1 创建 文本 和 列表 
在 网 页 中 添加 文本 的 方式 主要 有 以 下 几 种 ， 
1. 直接 写 文本 


这 是 最 简单 的 插入 文本 方法 ,有 时 候 文本 并 不 需要 放 在 文本 标记 中 ,完全 可 直接 放 在 
其 他 标记 中 。 例 如 ,一 div> 文 本 一 /div 盖 、<td>> 文 本 一 /td>>、<<body> 文 本 一 /body 二 、 
< 志文 本 </li。 


2. 用 段落 标记 二 p 一 … 到 /p> 格 式 化 文本 

各 段落 文本 将 换行 显示 ,段落 与 段落 之 间 有 一 行 的 间距 。 例 如 : 
< 户 第 一 段 < /> < 户 第 二 段 < />< 户 第 三 段 < /> 

3. 用 标题 标记 一 hn 之 … 二 /hn 二 格式 化 文本 


标题 标记 是 具有 语义 的 标记 , 它 指 明 标 记 内 的 内 容 是 一 个 标题 。 标 题 标 记 共 有 6 种 ， 
用 来 定义 第 ?级 标题 (一 1 一 6) ,2 的 值 越 大 , 字 越 小 ,所 以 二 hl 二 是 最 大 的 标题 标记 ,而 
二 h6 二 是 最 小 的 标题 标记 。 标 题 标记 中 的 文本 将 以 粗 体 显示 ,实际 上 可 看 成 是 特殊 的 段 
落 标记 。 
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该 属性 的 取 值 有 left( 左 对 齐 ) right( 右 对 齐 ) center( 居 中 对 齐 ) 
全 览 


o。 吧 
去 br /标记 是 强制 换行 标记 ,如果 和 希望 HTML 代码 中 的 文本 在 浏览 器 中 换行 ,可 





标题 标记 和 段落 标记 均 具有 对 齐 属性 align, 用 来 设置 元 素 的 内 容 在 元 素 占据 的 


空间 内 的 对 齐 方式 
4. 文本 换行 标记 二 br /二 
在 要 换行 处 插入 二 br /二 标记 。 在 Dreamweaver 中 插入 二 br /> 标记 的 快捷 键 是 Shift 十 


Enter。 
S. 列表 标记 
为 了 合理 地 组 织 文本 或 其 他 元 素 , 网 页 中 经 常 要 用 到 列表 。 列 表 标 记分 为 无 序列 表 
王 ul 有 序列 表 一 ol 之 和 定义 列表 王 dl 之 三 种 。 每 个 列表 标记 都 是 配对 标记 ,在 列表 标 


记 中 可 包含 若干 个 一 li 标记 ,表示 列表 项 。 
图 2-6 是 一 个 包含 了 各 种 文本 和 列表 的 网 页 ,其 对 应 的 HTML 代码 如 下 : 


<html> <body> 
<h2 align= "center"> 网 页 制作 语言 < /h2> 
<FP>VWEb 开 发 领域 常用 的 网 页 制作 语言 如 下 :< /p> 





<ul> 
<1i> HIML: 网 页 结构 语言 < /1i> 
<1li>css: 网 页 表现 语言 < /1i> 
< li> Javascript<br> 一 种 浏览 器 编程 语言 < /1i> 
<1i> PHP< /li> 
</u> 
< /body> < /html> 
ET lolx 
网 页 制作 语言 言 


Web 开 发 领域 常用 的 网 页 制作 语言 如 下 ， 


。HTIIL， 网 页 结构 语言 
。CSS: 网 页 表现 语言 


。 JavaScript 
浏览 器 编程 


理 言 


。PHP 
图 2-6 包含 各 种 文本 标记 的 网 页 
行 ,而 两 个 段落 标记 所 p 二 之 间 会 有 一 行 的 





提示 : 换行 标记 二 br /不 会 产生 空 
空隙。 
2.2.2 插入 图 像 
页 中 图 像 对 浏览 器 者 的 吸引 力 远 远大 于 文本 ,选择 最 恰当 的 图 像 , 能 够 牢 牢 吸引 浏 
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览 者 的 视线 。 图 像 直接 表现 主题 ,并 且 凭 借 图 像 的 意境 ,使 浏览 者 产生 共鸣 。 缺 少 图 像 而 
只 有 色彩 和 文字 的 设计 ,给 人 的 印象 是 没有 主题 的 空虚 的 画面 ,浏览 者 将 很 难 了 解 该 网 页 
的 主要 内 容 。 


1. 使 用 二 img 二 标记 插入 图 像 文件 


在 HTML 中 ,用 二 img 二 标记 可 以 插入 图 像 文 件 ,并 可 设置 图 像 的 大 小 、 对 齐 等 属 
性 , 它 是 一 个 单 标记 ,如 图 2-7 所 示 的 网 页 中 插入 了 一 Eppa a 
张 图 片 ,其 对 应 的 HTML 代码 如 下 : 文件 四 ”编辑 @@) 查看 WW) 收 高 (”| 避 
/leesos 22 snl“ 国 
SE 今天 多 到 一 条 大 鱼 ， 好 高 兴 1 
< 户 今 天 钓 到 一 条 大 鱼 , 好 高 兴 !< /p> 
< img src= "images/dayu.jpg" width= "200" 
height= "132" align= "center" 
title=" 好 大 的 鱼 "/> 
< /body> < /htm> 


该 网 页 中 显示 的 图 片 文件 位 于 当前 文件 所 在 目录 
下 的 images 目录 中 ,文件 名 为 dayu. jpg, 如果 不 存在 该 
文件 , 则 会 显示 一 片 空白 。 二 img 二 标记 的 常见 属性 如 表 2-3 所 示 。 

表 2-3 一 img 一 标记 的 常见 属性 














| 


图 2-7 在 网 页 中 插入 图 片 




















属 性 含义 
Src 图 片 文件 的 URL 地 址 
alt 当 图 片 无 法 显示 时 显示 的 蔡 代 文字 
title 光标 停留 在 图 片上 时 显示 的 说 明文 字 
align 图 片 的 对 齐 方式 ,共有 9 种 取 值 
width height 图 片 在 网 页 中 的 宽 和 高 ,单位 为 像素 或 百分比 


在 Dreamweaver 中 , 单 击 工具 栏 中 的 图 像 按钮 (图 ) 可 让 用 户 选 择 插 入 一 张 图 片 ,其 
实质 是 Dreamweaver 在 代码 中 自动 插入 了 一 个 二 img 二 标记 ,选中 插入 的 图 像 , 还 可 在 属 
性 面板 中 设置 图 像 的 各 种 属性 以 及 图 像 的 链接 地 址 等 。 

除了 使 用 二 img 二 标记 插入 图 像 外 ,还 可 将 图 像 作为 HTML 元 素 的 背景 嵌入 网 页 
中 ,由 于 CSS 的 背景 属性 功能 强大 ,现在 更 推荐 将 元 素 的 装饰 性 图 像 都 作为 背景 庶 入 。 
如 果 图 像 是 通过 一 img> 元 素 插 入 的 , 则 可 以 在 浏览 器 上 通过 按 住 鼠 标 左 键 拖 动 选中 图 
片 , 选 中 后 图 片 呈现 反选 状态 ,还 可 以 将 它 拖 动 到 地 址 栏 里 ,那么 浏览 器 将 单独 打开 这 幅 
图 片 。 如 果 是 作为 背景 嵌入 , 则 无 法 选中 图 片 。 


2. 网 页 中 支持 的 图 像 文件 格式 


网 页 中 可 以 插入 的 图 像 文件 格式 有 JPG、GIF 和 PNG 格式 ,它们 都 是 压缩 形式 的 图 
像 格式 ,容量 较 位 图 格式 (BMP) 的 图 像 小 ,适合 于 网 络 传输 。 这 三 种 格式 图 像 文件 的 特 
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点 如 表 2-4 所 示 。 





表 2-4 网 页 中 3 种 图 像 格式 的 比较 

















图 像 格式 JPG GIF PNG 
压缩 形式 有 损 压缩 无 损 压 缩 无 损 压 缩 
支持 的 颜色 数 | 24 位 真 彩色 256 色 真 彩色 或 256 色 
支持 透明 不 支持 支持 全 透明 支持 于 透明 和 全 透明 
支持 动画 不 支持 支持 不 支持 
适用 场合 照片 等 颜色 丰富 的 图 片 | 王 庆 时区 二 关 生生 | 都 可 以 











2.3 利用 Dreamweaver 代码 视图 提高 效率 


Dreamweaver 提供 了 方便 的 代码 编写 功能 。 前 面 曾 谈 到 ,页面 在 浏览 器 中 的 最 终 显 
示 效 果 完 全 是 由 HTML 代码 决定 的 ,Dreamweaver 只 是 帮助 用 户 方便 地 插入 或 者 生成 
必要 的 代码 。 在 实际 工作 中 ,还 是 会 经 常 遇 到 通过 可 视 化 的 方式 生成 的 代码 并 不 能 满足 
需要 的 情况 ,这 时 就 需要 设计 师 对 代码 进行 手工 调整 ,这 个 工作 可 以 在 Dreamweaver 的 
代码 视图 中 完成 。 

在 代码 视图 中 ,Dreamweaver 提供 了 很 多 方便 的 功能 ,可 以 帮助 用 户 更 高 效 地 完成 
代码 的 输入 和 编辑 操作 。 


2.3.1 代码 提示 


在 HTML 和 CSS 语言 中 ,都 有 很 多 标记 、 属 性 和 属性 值 ,设计 者 要 把 繁多 的 标记 、 属 
性 和 属性 值 记 清楚 是 很 不 容易 的 。 为 此 ， pv 
Dreamweaver 提供 了 方便 的 代码 提示 功能 ,以 减少 ” 间 回 rs | 国 珊 | 回 测 标题 无 标 是 文科 
设计 者 的 记忆 量 , 并 加 快 代码 的 输入 速度 。 本 Shee 
在 Dreamweaver 的 “代码 ”视图 中 ,如 果 希 望 | 营 
在 代码 中 的 某 个 位 置 增加 一 个 HTML 标记 ,只 需 上 
把 光标 移动 到 目标 位 置 ,输入 "一 ”, 就 会 弹出 标记 册 
由 
下 
:3 








提示 下 拉 框 ,如 图 2-8 所 示 。 这 时 可 以 按 / 键 选取 
所 需 的 标记 ,再 按 回 车 键 即 完成 对 该 标记 的 输入 ， 
有 效 地 避免 了 拼写 错误 。 

如 果 要 为 标记 添加 一 个 属性 ,只 需 在 标记 名 或 图 28 输入 "<" 后 弹出 标记 提示 
其 属性 后 按 下 空格 键 ,就 会 出 现下 拉 框 , 列 出 了 该 
标记 具有 的 所 有 属性 和 事件 ,如 图 2-9 所 示 , 按 v 键 就 可 选取 所 需 的 属性 。 实 际 上 ,通过 
查看 列 出 的 所 有 属性 ,还 可 以 帮助 我 们 学 习 该 标记 具有 哪些 属性 。 

如 果 列 出 的 属性 特别 多 ,那么 可 以 继续 输入 所 需 属性 的 第 一 个 字母 ,这 时 属性 提示 框 
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中 的 内 容 会 发 生变 化 , 仅 列 出 以 这 个 字母 开头 的 属性 ,就 大 大 缩小 了 选择 范围 。 

在 选择 了 某 个 属性 后 , 按 回 车 键 ,Dreamweaver 的 代码 提示 功能 就 会 自动 输入 
“一 ""”, 并 会 弹出 备 选 的 属性 值 , 如 图 2-10 所 示 。 这 时 按 y 键 就 可 选取 属性 值 , 再 按 回 车 
键 即 完成 了 属性 值 的 输入 。 如 果 要 修改 属性 值 , 只 需 把 属性 值 连同 引号 一 起 删 掉 ,然后 j 
输入 一 个 双 引 号 ,就 会 再 次 弹出 属性 值 提示 框 了 。 
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图 2-9 输入 空格 后 弹出 属性 提示 图 2-10 选中 属性 后 弹出 属性 值 提示 








2.3.2 ” Dreamweaver 中 的 常用 快捷 键 
表 2-5 列 出 了 Dreamweaver 的 一 些 常 用 快捷 键 , 实 际 上 这 些 快捷 键 是 很 多 软件 通用 
的 快捷 键 ,在 其 他 很 多 应 用 软件 (如 Word、Fireworks) 中 也 经 常 使 用 。 
表 2-5 ”Dreamweaver 的 常用 快捷 键 






































快捷 键 功 能 快捷 键 功 能 
Ctrl 十 Z 撤销 操作 Ctrl 十 C 复制 
Cu 二 S 保存 文档 Ctrl 十 V 粘贴 
F12 预览 网 页 Ctrl 十 X 剪 切 
Ctrl 十 A 全 选 Ctrl 十 N 新 建文 档 
1 CiriTz 
在 制作 网 页 过 程 中 ,为 了 调试 网 页 ,经 常会 把 网 页 修改 得 很 乱 , 此 时 如 果 想 回 退 到 原 


来 的 状态 ,只 需 按 Ctrl 十 Z 键 进行 撤销 操作 ,连续 按 则 能 撤销 多 步 操作 。 因 此 Ctrl 十 2 键 
可 能 是 网 页 制作 中 使 用 最 多 的 快捷 键 。 需 要 注意 的 是 ,即使 文档 保存 过 ,但 如 果 没 有 将 文 
档 的 窗口 关闭 就 仍然 能 按 Ctrl 十 Z 键 进行 撤销 。 


2. Ctrl 十 S 





由 于 调试 网 页 时 经 常 需要 预览 网 页 ,而 预览 之 前 必须 先 保存 网 页 ,因此 Ctrl 十 S 键 也 
是 用 得 很 频繁 的 快捷 键 , 它 的 作用 是 保存 网 页 ,调试 过 程 中 通常 是 按 了 Ctrl 十 S 键 后 马上 
按 F12 键 预览 。 
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这 几 个 快捷 键 是 文本 编辑 中 最 常用 的 快捷 键 , 在 制作 网 页 过 程 中 经 常 需要 使 用 。 例 
如 在 网 上 找到 一 个 完整 的 HTML 源 代 码 , 想 在 Dreamweaver 中 调试 。 那么 最 快捷 的 方 
式 就 是 先 在 网 上 复制 这 段 代 码 , 然 后 在 Dreamweaver 中 按 Ctrl 十 N 键 新 建 网 页 ,切换 到 
代码 视图 , 按 Ctrl 十 A 键 全 选 代码 视图 中 的 代码 ,再 按 Ctrl 十 V 键 粘 贴 就 能 将 网 上 的 代码 
替换 掉 Dreamweaver 中 原来 的 代码 。 


2.4 创建 超 链接 


超 链接 是 组 成 网 站 的 基本 元 素 , 通 过 超 链接 可 以 将 很 多 网 页 链接 成 一 个 网 站 ,并 将 
Internet 上 的 各 个 网 站 联系 在 一 起 ,浏览 者 可 以 方便 地 从 一 个 网 页 跳 转 到 另 一 个 网 页 。 

超 链 接 是 通过 URL( 统 一 资源 定位 器 ) 来 定位 目标 信息 的 。URL 主要 包括 4 部 分 : 
网 络 协议 (如 http://) ,域名 或 IP 地 址 文件 路 径 .文件 名 。 


2.4.1 超 链接 标记 二 a 二 
在 网 页 中 ,二 a… 二 /a 二 标记 且 带 有 href 属性 时 表示 是 超 链接 ,如 图 2-11 所 示 的 网 


页 中 创建 了 2 个 超 链接 , 当 鼠 标 移动 到 超 链接 上 时 会 变 成 手 形 。 yoyo 
其 代码 如 下 : 文件 外 编辑) 坦 ”| 局 


吴 三 加 | 忽 http://1ocalhost 国 





<html> <body> 
<a hre 全 "/index.html" target=" blank"> 网 站 首页 < /a> 
<ahref "ailto:xia8 qq.cam" titler "欢迎 给 我 来 信 "> 联 系 我 们 </ 图 > 11 网 页 中 的 超 链接 

Ba> 

< /body> < /hbm> 


去 a> 标 记 的 属性 及 其 取 值 如 表 2-6 所 示 。 
表 2-6 二 a> 标 记 的 属性 及 其 取 值 
属性 名 说 明 属 性 值 
href 超 链 接 的 URL 路 径 相对 路 径 或 绝对 路 径 、.Email、 间 锚 点 名 


_blank: 在 新 窗口 打开 

_self: 在 当前 窗口 打开 .默认 值 

target 超 链 接 的 打开 方式 _parent: 在 当前 窗口 的 父 窗口 打开 

_top: 在 整个 浏览 器 窗口 打开 链接 

窗口 或 框架 名 :在 指定 名 称 的 窗口 或 框架 中 打开 


title 超 链 接 上 的 提示 文字 | 属性 值 是 任何 字符 串 


自 定义 的 名 称 , 如 id 二 "chl1"。 二 a 二 标记 作为 锚 点 使 用 时 ,不 能 
设置 href 属性 

















id.name | 锚 点 的 id 或 名 称 








超 链接 的 源 对 象 是 指 可 以 设置 链接 的 网 页 对 象 ,主要 有 文本 、 图 像 或 文本 图 像 的 混合 
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体 , 它 们 对 应 二 a 二 标记 的 内 容 , 男 外 还 有 热 区 链接 。 在 Dreamweaver 中 ,这 些 网 页 对 象 
的 属性 面板 中 都 有 “链接 ”设置 项 ,可 以 很 方便 地 为 它们 建立 链接 。 


1. 用 文本 制作 超 链接 


在 Dreamweaver 中 ,可 以 先 输入 文本 ,然后 用 鼠标 选中 文本 ,在 属性 面板 的 “链接 ” 文 
本 框 中 输入 链接 的 地 址 并 按 Enter 键 ;也 可 以 单 击 * 常 用 ”工具 栏 中 的 “超级 链接 ”图 标 , 在 
对 话 框 中 输入 “文本 ”和 链接 地 址 ;还 可 以 在 代码 视图 中 直接 写 代 码 。 无 论 使 用 何 种 方式 ， 
生成 的 超 链接 代码 类 似 于 下 面 这 种 形式 : 


<a hre 全 "index.htm target=" blank"> 首 页 < /a> 
2. 用 图 像 制作 超 链接 


首先 需要 插入 一 幅 图 片 , 然 后 选中 图 片 ,在 属性 面板 的 “链接 ”文本 框 中 设置 图 像 链接 
的 地 址 。 生 成 的 代码 如 下 : 


<a href= "index.htm"> < jmg src= "images/info.gif" title= "返回 首页 "border= "0" />< /a> 


用 图 像 制 作 超 链接 ,最 好 设置 二 img 二 标记 的 border 属性 等 于 0, 和 否则 图 像 周 围 会 出 
现 一 个 蓝 色 的 2 像素 粗 的 边框 ,很 不 美观 。 


3. 热 区 链接 


用 图 像 制 作 超 链接 只 能 让 整 张 图 片 指向 一 个 链接 ,那么 能 否 在 一 张 图 片上 创建 多 个 
超 链 接 呢 ? 这 时 就 需要 热 区 链接 。 所 谓 热 区 链接 ,就 是 在 图 片上 划 出 若干 个 区 域 ,让 每 个 
区 域 分 别 链接 到 不 同 的 网 页 。 比 如 一 张 中 国 地 图 , 单 击 不 同 的 省 份 会 链接 到 不 同 的 网 页 ， 
就 是 通过 热 区 链接 实现 的 。 

制作 热 区 链接 首先 要 插入 一 张 图 片 ,然后 选中 图 片 ,在 展开 的 图 像 “ 属 性 ”面板 上 有 
“地 图 ”选项 , 它 的 下 方 有 三 个 小 按钮 分 别 是 绘制 矩形 、 圆 形 、 多 边 形 热 区 的 工具 ,如 图 2-12 
所 示 。 可 以 使 用 它们 在 图 像 上 拖 动 绘制 热 区 ,也 可 以 使 用 箭头 按钮 调整 热 区 的 位 置 。 





图 2-12 图 像 属性 面板 中 的 地 图 工具 


绘制 了 热 区 后 ,可 看 到 在 HTML 代码 中 增加 了 二 map 二 标记 ,表示 在 图 像 上 定义 了 
一 幅 地 图 。 地 图 就 是 热 区 的 集合 ,每 个 热 区 用 二 area 二 单 标记 定义 ,因此 过 map 之 和 
< 到 area> 是 成 组 出 现 的 标记 对 。 定 义 热 区 后 生成 的 代码 如 下 : 

< img src= "images/xf.jpg" alt= "说 明文 字 " border= "0" usemap= "Map" /> 

<map name= "Map" id- "Map™> 
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< area shaper "rect" coords= "51,131,188,183" href= "title.htm" alt= "说 明文 字 " /> 





< area shape= "rect" coords= "313, 129, 450, 180" hrefE- "#h3" /> 
< /rap> 


其 中 ,二 img 二 标记 会 增加 usemap 属性 与 它 上 面 定 义 的 地 图 ( 热 区 ) 建 立 关 联 。 

二 area 记 标记 的 shape 属性 定义 了 热 区 的 形状 ,coords 属性 定义 了 热 区 的 坐标 点 ， 
href 属性 定义 了 热 区 链接 的 文件 ,alt 属性 可 设置 鼠标 移动 到 热 区 上 时 显示 的 提示 文字 。 
2.4.2 绝对 URL 与 相对 URL 

URL 是 统一 资源 定位 器 的 意思 。 在 网 页 中 ,URL 用 来 描述 链接 的 文件 或 调用 的 图 
片 的 地 址 。 网 页 中 的 URL 可 分 为 绝对 URL 和 相对 URL。 

1. 绝对 URL( 绝 对 路 径 ) 


绝对 URL 是 采用 完整 的 URL 来 规定 文件 在 Internet 上 的 精确 地 点 ,包括 完整 的 协 
议 类 型 计算 机 域名 或 IP 地 址 、 包 含 路 径 信息 的 文档 名 。 书 写 格式 为 : 协议 : // 计 算 机 域 
名 或 IP 地址 [/ 文 档 路 径 J[/ 文 档 名 ]。 例 如 : 


<a href= "http://www.hynu.cn/index.htm"> 学 院 首 页 < /a> < !-- 链 接 文件 --> 
< img src= " http://www.hynu.cn/images/bg.jpg" /> <!-- 调 用 图 片 --> 


2. 相对 URL( 相 对 路 径 ) 


相对 URL 是 相对 于 当前 页 的 地 点 来 规定 文件 的 地 点 。 应 尽量 使 用 相对 URL 创建 
链接 ,使 用 相对 路 径 创 建 的 链接 可 根据 目标 文件 与 当前 文件 的 目录 关系 ,分 为 四 种 情况 : 
(1) 如 果 要 链接 到 同一 目录 内 的 其 他 文件 ,直接 写 目 标 文件 名 即 可 。 


<ahre 伍 "目标 文件 名 心 链接 文本 < /a> 
(2) 链接 到 下 一 级 目录 中 的 文件 , 则 先 写 下 一 级 目录 名 带 “/”, 再 写 目标 文件 名 。 
<ahre 伍 "于 目录 名 /目标 文件 名 必 链 接 文 本 < /a> 


(3) 如 果 要 链接 到 上 一 级 目录 中 的 文件 , 则 在 目标 文件 名 前 添加 *../”, 因 为 “..” 表 
示 上 级 目录 ,而 “. "表示 本 级 目录 。 例 如 ， 


<ahre 伍 "../ 目 标 文件 名 "> 链接 文本 < /a> 


(4) 链接 到 上 一 级 目录 中 其 他 子 目录 中 的 网 页 文件 , 则 可 先 退 回 到 上 一 级 目录 ,再 进 
入 目标 文件 所 在 的 目录 ,格式 为 : 


<ahref="../ 于 目录 名 /目标 文件 名 必 链 接 文本 < /a> 
3. 相对 URL 使 用 举例 


下 面 举 个 例子 说 明 相 对 路 径 的 使 用 方法 。 网 站 的 文件 目录 结构 如 图 2-13 所 示 。 
图 中 的 矩形 表示 文件 夹 , 圆 角 矩形 表示 文件 。 
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图 2-13 网 站 的 文件 目录 结构 
































(1) 如 果 f-01 目录 下 的 a. htm 需要 显示 同 目 录 下 的 box. gif 图 片 ,因为 在 当前 目录 
下 可 以 直接 找到 box. gif 文件 ,所 以 相对 路 径 是 box. gif。 

(2) 如 果 根 目录 下 的 index. htm 需要 显示 f01 目录 下 的 box. gif 图 片 , 则 应 先进 入 
f-01 目录 ,再 找到 box. gif 文件 ,因此 相对 路 径 是 “f-01/box. gif”。 

(3) 如 果 f-03/02 目录 下 的 b. htm 需要 显示 01 目录 下 的 cat. gif 图 片 , 则 应 从 02 目 
录 退 一 级 到 f-03 目录 ,再 进入 01 目录 ,所 以 相对 路 径 是 “. . /01/cat. gif”。 

(4) 如 果 b. htm 需要 显示 box. gif 图 片 ,应 该 写成 *../.. /{-01/box. gif”。 

(5) 如 果 a. htm 需要 显示 cup. gif 图 片 ,应 该 写成 *.. / {-03/02/cup. gif”。 

可 见 , 相 对 路 径 比 较 简便 ,不 需 输入 完整 的 URL。 另 外 相对 路 径 还 有 一 个 很 明显 的 
优点 是 : 可 以 毫 无 顾忌 地 修改 网 站 的 域名 或 网 站 文件 夹 在 服务 器 硬盘 中 的 存放 位 置 。 

提示 : 如 果 在 Dreamweaver 中 制作 网 页 时 看 到 代码 中 URL 为 file 协议 的 格式 , 例 
如 : file:///E|/ 网 页 制作 上 课 /DEMO/bg. png, 说 明 网 页 中 引用 的 资源 是 本 机 上 的 ,出 现 
这 种 情况 的 原因 是 引用 的 文件 没 在 网 站 目录 内 ,或 根本 没 创建 网 站 目录 ,或 网 页 文件 尚未 
保存 到 网 站 目录 内 。 当 网 页 上 传 到 服务 器 后 ,由 于 该 资源 在 服务 器 上 的 存放 路 径 和 本 机 
上 的 路 径 一 般 不 会 相同 ,就 会 出 现 找 不 到 文件 的 情况 ,因此 应 避免 这 种 情况 出 现 。 


2.4.3 超 链接 的 种 类 (href 属性 的 取 值 ) 


超 链接 有 很 多 种 类 ,如 网 页 链接 、 电 子 邮 件 链接 、 锚 链接 等 ,这 些 不 同类 的 超 链接 区 别 
在 于 其 href 属性 的 取 值 不 同 。 因 此 可 以 根据 href 属性 的 取 值 来 划分 超 链 接 的 类 型 。 





1. 链接 到 其 他 网 页 或 文件 


因为 超 链接 本 身 就 是 为 了 把 Internet 上 各 种 网 页 或 文件 链接 在 一 起 ,所 以 链接 到 文 
件 的 链接 是 最 重要 的 一 类 超 链接 , 它 可 分 为 以 下 几 种 : 

。 内 部 链接 ,链接 地 址 是 相对 URL, 如 
<ahreE- "../index.htm> 首 页 < /a> 

。 外 部 链接 ,链接 地 址 是 绝对 URL ,如 
<a hre 人 三 "http://ww.qq-com 人 > 腾讯 网 < /a> 

。 下 载 链 接 ,链接 地 址 是 一 个 浏览 器 不 能 打开 的 文件 类 型 ,如 rar、doc、apk 等 , 单 击 
链接 会 弹出 文件 下 载 框 ,如 
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<a hreE- "inc/test.rar> 点 击 下 载 </a> 





2. 电子 邮件 链接 


如 果 在 链接 的 URL 地 址 前 面 有 “mailto:”, 就 表示 是 电子 邮件 链接 , 单 击 电子 邮件 链 
接 后 ,浏览 器 会 自动 打开 默认 的 电子 邮件 客户 端 程序 (如 Outlook)。 


<a href= "mailto:xiaoli@ 163.com'> xiaoli@ 163.comc /a> 


由 于 我 国 用 户 大 多 不 喜欢 使 用 客户 端 程序 发 送 邮 件 , 所 以 也 可 以 不 建立 电子 邮件 链 
接 ,直接 把 Email 地 址 作为 文本 写 在 网 页 上 ,这 样 还 可 以 防止 垃圾 邮件 的 侵扰 。 


3， 锚 链接 (链接 到 页 面 中 某 一 指定 的 位 置 ) 





当 网 页 内 容 很 长 ,需要 进行 页 内 跳 转 链接 时 ,就 需要 定义 锚 点 和 锚 点 链接 , 锚 点 可 使 
用 name 属性 或 id 属性 定义 。 锚 链接 需要 和 锚 点 配合 使 用 , 单 击 锚 链 接 会 跳 转 到 指定 的 
锚 点 处 。 示 例 代码 如 下 : 


<a id "ch4>< /a> <!-- 定 义 锚 点 , 锚 点 名 为 ch4 - -> 
<ahre 人 "ch>…</a> ”<!-- 链 接 到 当前 网 页 的 锚 点 4 处 --> 
<a href= "intro.htm ah4">*…< /a> <!-- 链 接 到 intro.htm 网 页 的 锚 点 4 处 --> 


注意 : 定义 锚 点 时 锚 点 名 前 面 不 要 加 井 号 ,链接 到 锚 点 时 锚 点 名 前 要 加 井 号 。 
4. 空 链 接 和 脚本 链接 
还 有 一 些 有 特殊 用 途 的 链接 ,例如 测试 网 页 时 用 的 空 链接 和 脚本 链接 等 。 
<ahre 伍 叶 >…</a> < 二 - 空 链接 ,网 页 会 返回 页 面 顶端 --> 
<a href 伍 "Javascript:self.close(); > 关闭 窗口 < /a> <!-- 脚 本 链接 --> 
5, HTML 5 中 新 增 的 超 链接 
在 HTML 5 中 ,为 了 方便 制作 手机 网 站 , 超 链 接 的 href 属性 有 了 更 多 的 取 值 ,例如 : 
。 拨打 电话 号 码 的 链接 。 
<a href- "tel:13335418888"> 拨 打 电 话 < /a> 
。 发 短信 的 链接 。 


<a href= "sms:18688888888"> 发 短信 < /a> 


2.4.4 超 链 接 目 标的 打开 方式 


超 链接 标记 二 a 二 具有 target 属性 ,用 于 设置 链接 目标 的 打开 
方式 。 在 Dreamweaver 中 在 “目标 ”下 拉 列 表 框 中 可 设置 target 宙 
的 属性 的 取 值 ,如 图 2-14 所 示 。 其 常用 的 取 值 有 四 种 。 


(1) _self: 在 原来 的 窗口 或 框架 打开 链接 的 网 页 ,这 是 target 图 214 “目标 "下 拉 
列表 框 
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属性 的 默认 值 , 因 此 也 可 以 不 写 。 
(2) _blank: 在 一 个 新 窗口 打开 所 链接 的 网 页 ,这 个 很 有 用 ,可 防止 打开 新 网 页 后 把 
原来 的 网 页 覆盖 掉 , 例 如 : 


<a href= "http://www.rongshu.oom" target- "blank 榕树 下 < /a> 


(3) _parent: 将 链接 的 文件 载 人 到 父 框架 打开 ,如 果 包 含 的 链接 不 是 散 套 框架 , 则 所 
链接 的 文档 将 载 入 到 整个 浏览 器 窗口 。 

(4) _top: 在 整个 浏览 器 窗口 载 人 所 链接 的 文档 ,因而 会 删除 所 有 框架 。 

在 这 四 种 取 值 中 ,” parent””_top? 仅 仅 在 网 页 被 徐 入 到 其 他 网 页 中 有 效 , 如 框架 中 
的 网 页 ,所 以 它们 用 得 很 少 。 用 得 最 多 的 还 是 通过 target 属性 使 网 页 在 新 窗口 中 打开 ,如 
target 一 ”blank "。 要 注意 不 要 漏 写 取 值 名 称 前 的 下 划 线 ” ”。 


2.4.5 超 链接 制作 的 原则 
1. 可 以 使 用 相对 链接 尽量 不 要 使 用 绝对 链接 


相对 链接 的 好 处 在 前 面 已 经 详细 介绍 过 ,原则 上 ,同一 网 站 内 文件 之 间 的 链接 都 应 使 
用 相对 链接 方式 ,只 有 在 链接 到 其 他 网 站 的 资源 时 才 使 用 绝对 链接 。 例 如 ,和 首页 在 同一 
级 日 录 下 的 其 他 网 页 要 链接 到 首页 ,有 如 下 三 种 方法 : 

(1) 二 a href 二 ". "二 首 页 二 /a> 二 !-- 链 接 到 本 级 目录 , 则 自动 打开 本 级 目录 的 主 
页 -二 

(2) 二 a href=="index. html" 之 首 页 一 /a>> ”去 !-- 链 接 到 首页 文件 名 -- 盖 

(3) 二 a href 二 "http://www. hynu. cn" 二 首 页 一 /a> 所 !-- 链 接 到 网 站 名 -- 过 

通常 应 该 尽量 采用 前 两 种 方法 ,而 不 要 采用 第 三 种 方法 。 但 第 一 种 方式 需要 在 Web 
服务 器 上 设置 网 站 的 首页 为 index. html 后 才能 正确 链接 ,这 给 在 文件 夹 中 预览 网 页 带 来 
了 不 便 。 


2， 链接 目标 尽 可 能 简单 


假如 要 链接 到 其 他 网 站 的 主页 ,那么 有 如 下 两 种 写法 : 

(1) a href="http://www. hynu. cn" 之 首 页 之 /a> 

(2) <a href="http://www. hynu. cn/index. html" 二 首 页 二 /a 二 

则 第 (1) 种 写法 比 第 (2) 种 写法 要 好 ,因为 第 (1) 种 写法 不 仅 简单 ,还 可 以 防止 以 后 该 
网 站 将 首页 改名 (如 将 index. html 改 成 index. jsp) 造 成 链接 不 上 的 问题 。 


3. 超 链 接 的 综合 运用 实例 
下 面 这 段 代码 包含 了 各 种 类 型 的 超 链接 ,请 认真 总 结 这 些 超 链接 的 写法 。 


<htm><body> 

<pE><ahref- "dance.html> 红 舞 鞋 </a></e> 

<p><ahre 全 只 xzrh> 雪 绒 花 </a></e> 

<E><ahre 人 mailto:xialie 163.net title= "欢迎 给 我 来 信 ">< img src= "mail.gif" /></a>< /p> 
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< 户 好 站 推荐 :<a href= "htbp://www.baidn.com target=" blank> 百 度 < /a>< /p> 
<E><aijic "ah></a> 雪 绒 花 的 介绍 …… </b> 

<p align= "right"><a href= "JavaScript:self.close(); > 关闭 窗口 < /a>< /p> 

< /pody> < /html> 


2.4.6 Dreamweaver 中 超 链 接 属性 面板 的 使 用 


Dreamweaver 中 建立 链接 的 选项 框 如 图 2-15 所 示 ,文字 链接、 图 像 和 热 区 的 属性 面 
板 中 都 有 “链接 ”这 一 项 。 其 中 ,链接 ”对 应 标记 的 href 属性 ,目标 ”对 应 target 属性 。 
利用 超 链接 属性 面板 可 快速 建立 超 链接 ,首先 选中 要 建立 超 链 接 的 文字 或 图 片 ,然后 在 
“链接 ”选项 框 中 输入 要 链接 的 URL 地 址 。 








zs|®DDO 
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图 2-15 ”Dreamweaver 中 的 建立 链接 选项 框 
其 中 在 链接 地 址 栏 输入 URL 有 三 种 方法 : 一 是 直接 在 文本 框 输入 URL; 二 是 单 击 
“文件 夹 ” 图 标 浏览 找到 要 链接 的 文件 ;三 是 按 住 拖 放 定 位 图 标 ( 柄 ) 不 放 将 其 拖 动 到 锚 点 
处 或 文件 面板 中 要 链接 的 文件 上 ,如 图 2-16 所 示 。 使 用 以 上 任何 一 种 方式 使 “链接 ” 框 中 
出 现 了 内 容 后 ,“ 目 标 * 下 拉 列 表 框 将 变 为 可 用 ,可 选择 超 链 接 的 打开 方式 。 





图 2-16 使 用 拖 动 链接 定位 图 标 方式 建立 链接 


2.5 插入 Flash 及 多 媒体 元 素 


Flash 是 网 络 上 传输 的 矢量 动画 ,利用 Dreamweaver 可 以 很 方便 地 在 网 页 中 插入 
Flash 文件 ,从 而 在 网 页 上 展现 丰富 的 动画 效果 ,而 网 页 中 插入 视频 的 方法 和 择 入 Flash 
的 方法 差不多 ,也 是 通过 插件 或 ActiveX 方式 插入 的 。 


2.5.1 插入 Flash 
1. 使 用 Dreamweaver 在 网 页 中 插入 Flash 的 两 种 方法 


(1) 执行 “插入 ”一 “媒体 ”>Flash 菜单 命令 ,再 在 “属性 ?面板 中 调节 插件 的 宽 和 高 ， 
在 代码 视图 中 可 看 到 插入 Flash 元 素 是 通过 同时 插入 过 object 二 标记 和 所 embed 之 标记 
实现 的 ,以 确保 在 所 有 浏览 器 中 都 获得 应 有 的 效果 。 

(2) 执行 “插入 ”媒体 ”一 "插件 ?全 单 命令 ,此 方法 在 代码 中 仅 插 入 了 过 embed> 
标记 。 如 果 不 需要 设置 特别 的 参数 (如 wmode= "transparent") ,那么 在 IE 和 Firefox 也 
能 看 到 效果 ,而 且 代码 更 简洁 ,所 以 推荐 用 这 种 方式 。 
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2. 在 图 像 上 放置 透明 Flash 


有 些 Flash 动画 的 背景 是 透明 的 ,在 百度 上 搜索 “透明 Flash” 可 以 找到 很 多 透明 的 
Flash 动画 。 可 以 将 这 种 透明 背景 的 Flash 动画 放 在 一 幅 图 片上 ,使 图 片 看 起 来 和 Flash 
融 为 一 体 也 有 动画 效果 了 。 方 法 是 先 将 一 张 需要 放置 透明 Flash 的 图 片 作为 单元 格 ( 或 
div 等 其 他 元 素 ) 的 背景 ,然后 在 此 单元 格 内 插入 一 个 透明 Flash 文件 ,这 样 这 个 Flash 文 
件 就 覆盖 在 了 图 片 的 上 方 。 然 后 调整 此 Flash 插件 的 大 小 与 图 片 大 小 相 一 致 。 再 选中 该 
Flash 插件 , 单 击 属性 面板 里 的 “参数 ”按钮 ,在 如 图 2-17 所 示 的 “参数 ”对 话 框 中 新 建 一 个 
参数 wmode, 值 设置 为 transparent。 生 成 的 代码 包括 一 个 二 param 过 标记 和 一 个 在 
< 过 object 之 标记 中 的 wmode 属性 ,其 中 二 param name 一 "wmode" value 二 "transparent"/ 祖 
使 Flash 在 IE 中 能 够 透明 ,而 wmode 二 "transparent" 使 Flash 在 Firefox 中 透明 。 








图 2-17 设置 Flash 文件 透明 方式 显示 


2.5.2 插入 视频 或 音频 文件 
1. 插入 avi.mpg 或 wmv 格式 视频 


视频 文件 的 格式 主要 有 avi.wmv、mpg、rm、rmvb 等 ,如 果 要 插入 avi.mpg 或 wmv 等 
Windows 媒体 播放 器 能 播放 的 格式 文件 ,可 以 直接 使 用 插件 方式 插入 。 方法 是 在 
Dreamweaver 中 执行 “插入 ”媒体 ”一 “插件 ?菜单 命令 ,然后 在 插件 的 “属性 ?面板 中 设 
置 视频 文件 的 宽 和 高 ,如 图 2-18 所 示 。 注 意 高 度 的 设置 值 最 好 比 视频 的 高 度 多 40 像素 ， 
因为 这 个 高 度 包含 了 播放 控制 条 的 高 度 。 这 样 在 网 页 中 就 可 以 播放 视频 了 。 





pe | 
一 一 与 


图 2-18 ”插件 属性 面板 


切换 到 代码 视图 ,可 看 到 生成 的 源 代码 如 下 : 

< enibed src= "acl .wmv" width= "400" height= "340"> < /enbed> 

如 果 不 希 望 在 打开 网 页 后 视频 自动 播放 ,可 添加 属性 autostart 一 "false'"。 
2. 插入 RealPlayer 格式 视频 


要 在 网 页 中 插入 rm、rmvb 等 RealPlayer 格式 的 视频 也 可 使 用 二 embed 二 标记 来 插 
入 ,但 必须 将 网 页 上 传 到 服务 器 上 才能 播放 。 为 了 在 本 机 上 就 能 播放 ,可 以 使 用 ActiveX 
方式 插入 。 方 法 是 执行 “插入 ”一 “媒体 ”一 ActiveX 菜单 命令 ,这 样 就 在 网 页 中 插入 了 一 
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个 ActiveX 控件 ,然后 再 设置 它 的 宽 和 高 ,对 于 RealPlayer 格式 的 视频 ,要 在 “属性 ”面板 
中 将 ClassID 设置 为 “RealPlayer/…”, 如 图 2-19 所 示 。 








2-19 ”ActiveX 属性 面板 


然后 再 在 代码 视图 对 过 object 二 标记 中 设置 参数 二 param> ,主要 是 指定 视频 文件 的 
URL 和 关联 播放 组 件 。 源 代码 如 下 : 


< cbject classidF "clsiqd:CECDRRO3- 8BE4- 11cf- B84B- 0020AFEBOCEA" width= "452" height= "320"> 
< param name= "console" value= "clipl" /> < 上 -用 来 关联 播放 组 件 --> 
< param name= "autostart" value= "true" /> 
< param name= "src" value= "wenrou.mm" /> < 上 -指定 文件 的 URL- -> 
< param name= "controls" value= "imagewindow" /> 
< /cbhject> 


3. 插入 FLV 格式 视频 


FLV(Flash Video) 格 式 的 视频 是 目前 使 用 最 广泛 的 网 络 流 媒体 视频 传播 格式 ,被 许 
多 在 线 视频 网 站 采用 。 在 网 页 中 插入 FLV 视频 的 方法 有 两 种 。 

(1) 执行 菜单 命令 “插入 ”一 “媒体 ”一 “Flash 视频 ”, 在 弹出 的 "插入 Flash 视频 ?对话 
框 中 ,选择 视频 文件 的 URL ,在 外观” 中 可 以 选择 一 种 播放 器 的 外 观 , 最 后 要 选中 “自动 
播放 " 复 选 框 。 这 样 就 能 在 网 页 中 播放 FLV 视频 了 。 

(2) 使 用 swfobject. js 文件 ,也 能 插入 FLYV 视频 。 该 文件 需要 配合 mediaplayer. swf 
文件 使 用 ,将 上 述 两 个 文件 放 在 网 站 目录 下 ,并 在 网 页 中 插入 如 下 JavaScript 代码 ,就 能 
播放 FLV 视频 了 。 


< script src= "swfobject.js"> < /script> 
<script> 
Var sl= new SWFCbject ("mediaplayer .swf", "mediaplayer", "640", "480", "7"); 
sl1.addParam("allowfullscreen", "true"); 
sl.addVariable ("width", "640") ; // 设 置 视频 的 宽度 
sl.acdVariable ("height", "480"); 
sl.addVariable ("file", "hnfh.flv"); // 视 频 文件 的 UEL 
sl.addVariable ("image","hnfh.jpg"); 。 // 视 频 播 放 时 的 初始 图 像 
sl.write ("container"); 
</script> 


使 用 这 种 方法 ,能 够 避免 在 HTML 代码 中 出 现 二 object 之 和 二 embed> 等 非 标准 标 
记 , 从 而 更 加 符合 Web 标准 ,也 符合 搜索 引擎 优化 的 原则 。 


4. 插入 音频 文件 
插入 音频 文件 同样 可 用 插件 方式 或 ActiveX 方式 实现 ,下 面 是 插件 方式 插入 的 代码 : 


< erbed src= "wenrou.nmp3" width= "31" height= "26" autostart= "false"> < /enbed> 


如 果 和 希望 将 音频 文件 设置 为 背景 音乐 , 即 不 显示 播放 器 的 界面 ,可 加 一 条 隐藏 
(hidden) 属 性 和 循环 播放 (loop 二 "true") 属 性 。 


2.5.3 HTML 5 新 增 的 多 媒体 标记 


在 HTML 4 中 ,二 embed 志 标记 或 二 object 二 标记 虽然 可 以 插入 视频 ,但 支持 的 视频 
格式 非常 有 限 ,这 已 不 能 满足 网 络 上 播放 各 种 视频 文件 的 需要 了 。 在 HTML 5 中 ,新 增 
了 几 个 标记 用 来 插入 视频 或 音频 文件 。 其 中 ,二 video 二 标记 用 于 插入 视频 ,二 audio 二 标 
记 用 于 插入 音频 ,一 canvas 之 标记 可 以 插入 生成 的 图 像 或 动画 。 


1. 一 video 二 标记 


去 video> 标 记 插入 视频 的 示例 代码 如 下 : 
<Video src= "movie.ogg" width= "320" height= "240" controls= "controls"> 
你 的 浏览 器 不 支持 wideo 标 记 
< ideo> 
其 中 ,src 属性 用 于 指定 视频 文件 的 路 径 和 文件 名 ,width 和 height 属性 设置 视频 的 
显示 大 小 ,controls 属性 用 于 设置 是 否 显示 控制 条 。 
去 video> 与 一 /video> 之 间 的 内 容 用 于 在 不 支持 该 标记 的 浏览 器 中 显示 替代 信息 。 
由 于 不 同 的 客户 端 支持 的 视频 格式 有 可 能 不 同 , 为 此 ,过 video 二 标记 还 提供 了 设置 
多 个 备 选 视频 文件 的 功能 ,此 时 ,应 使 用 二 source 之 标记 而 非 src 属性 来 设置 视频 文件 的 
地 址 。 
例如 ,有 些 浏 览 器 支持 使 用 了 H. 264 编码 的 mp4 格式 视频 文件 ,但 有 的 浏览 器 不 支 
持 , 对 于 不 支持 的 浏览 器 ,只 需要 把 后 备 内 容 放 在 第 2 个 source 标记 中 ,后 备 内容 可 以 包 
含 多 种 视频 格式 。 如 果 连 video 标记 都 不 支持 ,还 可 在 其 中 嵌入 object 标记 。 下 面 是 示 
例 代码 : 
<Videc> 
< source src= "movie .mp4> 
< source src= "movie.ogv> 
<cbject datar "movie.swf"> <a href= "movie.mp4"> downloadc /a> 
< /cbject> 
< /video> 
上 述 代码 中 ,如 果 浏 览 器 支持 video 标记 ,也 支持 H. 264, 则 会 显示 第 1 个 视频 。 如 
果 浏 览 器 支持 video 标记 ,也 支持 Ogg, 那 么 会 显示 第 2 个 视频 。 如 果 浏 览 器 不 支持 
video 标记 , 则 会 显示 object 标记 中 的 Flash 视频 了 。 如 果 浏 览 器 不 支持 video 标记 ,也 不 
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支持 Flash, 则 会 显示 下 载 视频 的 链接 。 可 见 , 通 过 video 标记 ,就 能 为 各 种 浏览 器 提供 支 
持 的 视频 格式 了 。 





2. 二 audio 标记 


去 audio> 标 记 用 于 插入 音频 ,其 用 法 与 video 标记 类 似 , 示 例 代码 如 下 : 
< audio src= "sang.ogg"” controls= "controls"> 


你 的 浏览 器 不 支持 audio 标 记 
</audio> 


二 audio 二 标记 也 提供 了 设置 多 个 备 选 音频 文件 的 功能 ,此 时 ,应 使 用 source 标记 而 
非 src 属性 来 设置 音频 文件 的 地 址 。 示 例 代码 如 下 : 
< audio controls= "controls"> 
< Source src= "song.0gg" type= "audio/ogg"> 
< source src= "song.mp3" type= "audio/mpeg"> 
你 的 浏览 器 不 支持 audio 标 记 
</audio> 
二 audio 志 标记 和 二 video 二 标记 都 具有 以 下 几 个 属性 : 
(1) autoplay 一 一 如 果 出 现 该 属性 , 则 媒体 文件 在 网 页 打开 后 会 自动 播放 ; 
(2) controls 一 一 如 果 出 现 该 属性 , 则 播放 界面 下 会 显示 控制 条 ; 
(3) loop 一 一 如 果 出 现 该 属性 , 则 媒体 文件 会 循环 播放 ; 
(4) preload 一 一 如 果 出 现 该 属性 , 则 媒体 文件 在 页 面 加 载 时 就 会 加 载 ,并 预备 播放 。 
如 果 使 用 了 autoplay 属性 , 则 忽略 该 属性 。 


3. 一 canvas 二 标记 


去 canvas 过 标记 称 为 画布 标记 ,用 于 在 网 页 上 绘制 图 形 。 所 canvas 之 标记 本 身 没有 
绘制 图 形 的 能 力 , 所 有 的 绘制 工作 必须 使 用 JavaScript 程序 来 完成 。 画 布 是 一 个 矩形 区 
域 , 我 们 可 以 控制 其 每 一 像素 。 志 canvas 二 标记 使 用 的 步骤 如 下 : 

(1) 创建 canvas 元 素 , 并 定义 元 素 的 ID ,设置 元 素 的 宽度 和 高 度 : 


< canvas jdF "myCanvas" width= "200" height= "100"> < /canvas> 
(2) 通过 JavaScript 获取 canvas 元 素 ,并 绘制 图 形 ,运行 效果 如 图 2-20 所 示 。 


<script> 
Var C= docoument .getElementById ("myCarvas"); // 获 取 mycanvas 元 素 
Var Cxt= c.getContext ("2d"); 


Ct.fillStyle= "#ffFFFO0"; // 设 置 填充 颜色 
cat.£illRect (0,0,150,75); /绘制 窍 形 

Cat roveTo (10, 10); // 将 画笔 移动 到 坐标 位 置 
Cxt. lineTo (150, 50); // 产 生 线条 


Cat.lineTo (10, 50); 


Cxt.stroke(); /人 /绘制 路 径 
</script> 


其 中 ,getContext() 方 法 返回 一 个 用 于 在 画布 
上 绘图 的 环境 。 该 方法 的 参数 目前 只 能 是 2D, 它 > 
指定 是 进行 二 维 绘图 (目前 canvas 标记 不 支持 3D 
绘图 ) ,该 方法 返回 一 个 环境 对 象 , 该 对 象 导出 一 个 
二 维 绘图 的 API。 


二 canvas 之 标记 还 可 以 把 一 个 图 像 文 件 放置 到 
画布 上 ,示例 代码 如 下 : 


图 2-20 ”canvas 元 素 绘制 图 形 的 效果 


< canvas id= "myCanvas" width= "600" height= "500"> 
<script> 

Var C= dooument .getElementById ("myCanvas"); 

Var Cxt= c.getContext ("2d"); 

Var img= new Irage() 


ing.src= "imeges/car.jpg" // 指 定 图 像 文件 的 URL 

Cxt .drawIrage (img, 10,10,540,460); // 从 坐标 点 10,10 开 始 装载 图 片 

< /script> 

其 中 ,drawImage 方法 用 于 在 画布 上 定位 图 像 ,并 规定 图 像 的 宽度 和 高 度 。 
2.6 创建 表格 


表格 在 网 页 中 的 应 用 非常 广泛 ,网 页 中 的 表格 不 仅 用 来 显示 数据 ,还 可 用 来 对 网 页 进 
行 排版 和 布局 ,使 用 表格 最 明显 的 好 处 就 是 能 以 行列 对 齐 的 方式 来 显示 文本 或 图 像 信息 ， 
以 达到 精确 控制 文本 和 图 像 在 网 页 中 位 置 的 目的 。 通 过 表格 布局 的 网 页 ,网 页 中 所 有 元 
素 都 放 园 在 表格 的 单元 格 ( 二 td 二 标记 ) 中 。 


2.6.1 表格 标记 (二 table 二 ) 

网 页 中 的 表格 由 二 table 二 标记 定义 ,一 个 表格 被 分 成 许多 行 二 tr 二 ,每 行 又 被 分 成 许 
多 个 单元 格 一 td 人 > ,因此 <table> .<tr> ,二 td 这 是 表格 中 三 个 最 基本 的 标记 ,它们 必须 
同时 出 现 才 有 意义 。 表 格 中 的 单元 格 能 容纳 网 页 中 的 任何 元 素 , 如 图 像 .文本 、 列 表 、 表 
单 . 表 格 等 。 

1. 二 table 二 标记 


下 面 是 一 个 最 简单 的 表格 代码 , 它 的 显示 效果 如 图 2-21 所 示 。 


<table border= "1"> 
<tr><td> GL ]< /td><td> GL 2< /td> 
< /tr> 
<tr><to GL x /td><td> IL 4 /td> 
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< 
< /table> 





从 图 2-21 可 知 , 一 个 二 tr 过 标记 表示 一 行 ,二 tr 过 标记 中 有 两 个 二 td 二 标 记 , 表 示 一 
行 中 有 两 个 单元 格 , 因 此 显示 为 两 行 两 列 的 表格 。 要 注意 在 表格 中 行 比 列 大 ,总 是 一 行 
二 tr 二 中 包含 若干 个 单元 格 二 td 请 。 

在 这 个 表格 二 table 二 标记 中 还 设置 了 边框 宽度 (border 二 "1"), 它 表示 表格 的 边框 宽 
度 是 1 像素 。 下 面 将 边框 宽度 调整 为 10 像素 , 即 二 table border 王 "10" 二 ,这 时 显示 效果 
如 图 2-22 所 示 。 


[CELL 1 CELL 2 


CELL 3[CELL 4 








cellpadding="12" 
图 2-21 最 简单 的 表格 图 2-22 cellpadding 属性 


此 时 虽然 表格 的 边框 宽度 变 成 了 10 像素 ,但 表格 中 每 个 单元 格 的 边框 宽度 仍然 是 1 
像素 ,从 这 里 可 看 出 设置 表格 边框 宽度 不 会 影响 单元 格 的 边框 宽度 。 

但 有 一 个 例外 ,如 果 将 表格 的 边框 宽度 设置 为 0, 即 二 table border="0" 之 (由 于 
border 属性 的 默认 值 就 是 0, 因 此 也 可 将 border 属性 删除 ) , 则 单元 格 的 边框 宽度 也 跟着 
变 为 了 0。 此 时 表格 边框 和 单元 格 边框 都 消失 ,在 用 表格 进行 网 页 布局 时 通常 需要 这 样 
设置 。 

由 此 可 得 出 结论 : 设置 表格 边框 为 0 时 ,会 使 单元 格 边框 也 变 为 0; 而 设置 表格 边框 
为 其 他 数值 时 ,单元 格 边框 宽度 保持 不 变 ,始终 为 1 。 


2. 填充 (cellpadding) 和 间距 (cellspacing) 属 性 


填充 (cellpadding) 和 间距 (cellspacing) 是 二 table 二 标记 两 个 很 重要 的 属性 ， 
cellpadding 表示 单元 格 中 的 内 容 到 单元 格 边框 之 间 的 距离 ,默认 值 为 0; 而 cellspacing 表 
示 相 邻 单 元 格 之 间 的 距离 ,默认 值 为 1。 

合理 设置 填充 和 间距 属性 将 美化 表格 。 例 如 将 表格 填充 设置 为 12, 即 二 table border 一 
"10" cellpadding 一 "12" 二 , 则 显示 效果 如 图 2-22 所 示 。 

把 表格 填充 设置 为 12, 间 距 设置 为 15, 即 过 table border 二 "10" cellpadding 二 "12" 
cellspacing 一 "15" 之 , 则 显示 效果 如 图 2-23 所 示 。 

此 外 ,表格 二 table 二 标记 还 具有 宽 (width) 和 高 (height) ,水 平 对 齐 (align) .背景 颜色 
(bgcolor) 等 属性 。 表 2-7 列 出 了 到 table 之 标记 的 常见 属性 。 
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cellspacing="15" 


图 2-23 cellspacing 属性 


表 2-7 一 table 二 标记 的 属性 





























二 table 二 标记 的 属性 售 文 
border 表格 边框 的 宽度 ,默认 值 为 0 
bordercolor 表格 边框 的 颜色 , 若 不 设置 ,将 显示 立体 边框 效果 
bgcolor 表格 的 背景 色 
background 表格 的 背景 图 像 
cellspacing 表格 的 间距 ,默认 值 为 1 
cellpadding 表格 的 填充 ,默认 值 为 0 
width ,height 表格 的 宽 和 高 .可 以 使 用 像素 或 百分比 做 单位 
align 表格 的 水 平 对 齐 属 性 ,默认 为 left 
rules 只 显示 表格 的 行 边框 或 列 边框 





2.6.2 行 二 tr 之 和 单元 格 二 td 之 二 th 之 标记 


二 tr 二 表示 表格 中 的 一 行 ,该 标记 有 一 些 属性 ,如 align: 统一 设置 该 行 中 所 有 单元 格 
的 水 平 对 齐 方 式 ,valign: 统一 设置 该 行 中 所 有 单元 格 的 垂直 对 齐 方式 ,bgcolor: 设置 该 
行 的 背景 颜色 。 

表 头 标记 过 th 之 相当 于 一 个 特殊 的 单元 格 忆 td 之 标记 ,只 不 过 过 th 之 中 的 字符 会 以 
粗 体 居中 方式 显示 。 可 以 将 表格 第 一 行 (第 一 个 二 tr 二 ) 中 的 二 td 二 换 成 二 th 二 ,表示 表 
格 的 表 头 。 

对 于 单元 格 标记 二 td 之 .过 th> 来 说 ,它们 具有 一 些 共同 的 属性 ,包括 width height、 
align、valign、nowrap( 不 换行 )、bordercolor、bgcolor 和 background。 这 些 属 性 对 于 行 标 
记 二 tr 二 来 说 ,大 部 分 都 具有 ,只 是 没有 width 和 background 属性 。 


1. 单元 格 标记 的 对 齐 属性 


单元 格 二 td 二 或 二 th 二 标记 具有 align 和 valign 属性 ,其 含义 如 下 : 

(1) align 一 一 单元 格 中 内 容 的 水 平 对 齐 属 性 , 取 值 有 left( 默 认 值 ) ,center .right。 

(2) valign 一 一 单元 格 中 内 容 的 垂直 对 齐 属 性 , 取 值 有 middle( 默 认 值 ) .top .bottom 。 
即 单元 格 中 的 内 容 默认 是 水 平 左 对 齐 ,垂直 居中 对 齐 的 。 由 于 默认 情况 下 单元 格 是 
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以 能 容纳 内 容 的 最 小 宽度 和 高 度 定义 大 小 的 ,所 以 必须 设置 单元 格 的 宽 和 高 使 其 在 大 于 
最 小 宽 高 值 时 才能 看 到 对 齐 的 效果 。 例 如 ,下 面 的 代码 的 显示 效果 如 图 2-24 所 示 。 





<table width= "256" border= "4" oellpacding= "2"> 
< tr valignr "bottom" height= "58"> 
<td width= "82"> 底 端 对 齐 < /to> 
<td width= "96" valign= "top"> 顶端 对 齐 < /to> 
</tr> 
< tr align= "center" height= "54"> 
<td valign= "top"> 水 平 居 中 顶端 < /td> 
<td> 水 平 居中 < /td 
< /tr> 
< /table> 图 2-24 align 属性 和 valign 属性 




















2. bgcolor 属性 


bgcolor 属性 是 二 table> 、<tr>、 二 td> 都 具有 的 属性 ,用 来 对 表格 或 单元 格 设置 背 
景色 。 在 实际 应 用 中 , 常 将 所 有 单元 格 的 背景 色 设置 为 一 种 颜色 ,将 表格 的 背景 色 设置 为 
另 一 种 颜色 。 此 时 如 果 间 距 (cellspacing) 不 为 0, 则 表格 的 背景 色 会 环绕 单元 格 , 使 间距 
看 起 来 像 边框 一 样 。 例 如 ,下 面 的 代码 显示 效果 如 图 2-25 所 示 。 


< table border= "1" oellpadding= "]2" oellspacing= "5" bordercolor= #333333" bgoolor= "ococcc"> 
<tr bgoolor= "#ffffff"> < to> CEIL 1< /to> < to> CEIL 2< /to> < /tr> 

<tr bgcolor= "#ffffff"> < to> CEIL 3 /to> <to> CEIL 4 /to> < /tr> 

< /table> 


如 果 在 此 基础 上 将 表格 的 border 属性 设置 为 0, 则 显示 效果 如 图 2-26 所 示 , 可 看 出 
此 时 间距 像 边框 一 样 了 ,而 这 个 由 间距 形成 的 “边框 ”实际 上 是 表格 的 背景 色 。 





四 
图 2-25 设置 表格 背景 色 为 灰色 .单元 格 图 2-26 在 图 2-25 的 基础 上 将 表格 边框 
背景 色 为 白色 的 效果 宽度 设置 为 0 


如 果 要 减少 bgcolor 属性 的 书写 次 数 ,可 以 使 用 二 tbody 二 标记 ,在 所 有 二 tr 二 标记 的 
外 面 嵌 套 一 个 二 tbody 二 标记 ,再 设置 tbody 二 的 背景 色 为 白色 即 可 ,例如 : 


< table cellpadding= "12" oellspacing= "5" borderoolor= "#333333" bgcolor= 
哗 cccccc> 
< tbody bgcolor= 只 ffffff"> 
<tr><td> CETL 1< /to><to GL 2< /td>< /tr> 
<tr><td> CETL x /td<td> GL kk /td>< /tr> 
< /thody> 
< /table> 
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提示 : 二 tbody 二 是 表格 体 标记 , 它 包 含 表格 中 所 有 的 行 或 单元 格 。 因 此 ,如 果 所 有 
单元 格 或 行 的 菜 个 属性 都 相同 ,可 以 将 该 属性 写 在 二 tbody 记 标记 中 ,例如 上 述 代 码 中 的 
(bgcolor 一 " 间 ffffff") ,这样 可 减少 代码 宛 余 。 


3. 单元 格 的 合并 属性 


如 果 要 合并 某 些 单元 格 制作 出 如 图 2-27 所 示 的 表格 , 则 必须 使 用 单元 格 的 合并 属 
性 ,单元 格 二 td 二 标记 的 合并 属性 有 colspan( 跨 多 列 属 一 一 一 一 
性 ) 和 rowspan( 跨 多 行 属 性 ), 是 二 td 二 标记 特有 的 属 课程 表 [ 上 车 打车 


语文 要 学 
性 ,分 别 用 于 合并 列 或 合并 行 。 例 如 : 
图 2-27 单元 格 合 并 后 的 效果 
<tq colspan= "2"> 星 期 一 < /td> 


表示 该 单元 格 由 2 列 (2 个 并 排 的 单元 格 ) 合 并 而 成 , 它 将 使 该 行 <tr 二 标记 中 减少 一 个 
二 td 二 标记 。 又 如 : 














<tq rowspar= "3"> 课程 表 < /td 
表示 该 单元 格 由 3 行 (3 个 上 下 排列 的 单元 格 ) 合 并 而 成 , 它 将 使 该 行 下 的 两 行 , 两 个 
到 tr 之 标记 中 分 别 减少 一 个 二 td> 标 记 。 

如 果 一 个 单元 格 由 3 行 3 列 9 个 单元 格 合并 而 成 , 则 需要 同时 使 用 colspan 和 
rowspan 属性 。 

提示 : 设置 了 单元 格 合并 属性 后 ,再 对 单元 格 的 宽 或 高 进行 精确 设置 会 发 现 不 容易 
了 ,因此 在 用 表格 布局 时 不 推荐 使 用 单元 格 合并 属性 ,使 用 表格 说 套 更 合适 些 。 


4. 二 caption 二 标记 及 其 属性 


去 caption 二 标记 用 来 为 表格 添加 标题 ,这 个 标题 固然 可 以 用 普通 的 文本 实现 ,但 是 
使 用 过 caption 之 标记 可 以 更 好 地 描述 这 个 表格 的 含义 。 
< table cellpadding= "12" oellspacing= "5" bgoolor= 只 ccococ> 


<caption> 产 品目 录 表 < /caption> < 上 -<caption> 必 须 位 于 <table> 标 记 内 --> 
<tr><td>……… < /td> < /tr> 


2.6.3 在 Dreamweaver 中 操作 表格 的 方法 
1. 在 Dreamweaver 中 选中 表格 的 方法 


对 表格 进行 操作 之 前 必须 先 选 中 表格 ,有 时 几 层 表格 典 套 在 一 起 ,使 用 以 下 方法 仍然 
可 以 方便 地 选中 表格 或 单元 格 。 

(1) 选择 整个 表格 : 将 鼠标 指针 移 到 的 表格 左上 和 角 或 右 下 角 时 ,光标 右 下 角 会 出 现 
表格 形状 ,此 时 单 击 就 可 以 选中 整个 表格 ,或 者 在 表格 区 域内 单 击 ,再 选择 状态 栏 中 的 
二 table 二 标签 按钮 。 

(2) 选择 一 行 或 一 列 单元 格 : 将 鼠标 指针 置 于 一 行 的 左边 框 上 ,或 置 于 一 列 的 顶端 
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边框 上 ,当选 定 箭头 (时 ) 出 现时 单 击 , 选 择 一 行 也 可 单 击 状态 栏 中 的 二 tr 二 标签 按钮 。 

(3) 选择 连续 的 几 个 单元 格 : 在 一 个 单元 格 中 单 击 并 拖 动 鼠 标 横向 或 纵向 移 至 男 一 
单元 格 。 
(4) 选择 不 连续 的 几 个 单元 格 : 按 住 Ctrl 键 , 单 击 欲 选 定 的 单元 格 、 行 或 列 。 
(5) 选择 单元 格 中 的 网 页 元 素 : 直接 单 击 单元 格 中 的 网 页 元 素 。 
提示 : 按 住 Ctrl 键 ,鼠标 在 表格 上 滑动 ,Dreamweaver 会 高 亮 显示 表格 结构 。 





2. 向 表格 中 插入 行 或 列 的 方法 


当 光 标 位 于 表格 内 时 ,在 右键 快捷 菜单 中 选择 “表格 ”一 “插入 行 (或 插入 列 )” 命 令 , 可 
在 表格 的 当前 行 的 上 方 插入 一 行 ,或 当前 行 的 左边 插入 一 列 ; 若 要 在 表格 的 最 右边 插 和 人 一 
列 或 最 下 方 插入 一 行 , 可 选择 “表格 ”>“ 插 入 行 或 列 …” 命 令 , 即 在 所 选 列 之 后 或 所 选 行 之 
下 插入 列 或 行 。 插 入 行 也 可 以 在 代码 视图 中 复制 一 行 的 代码 “过 tr 二 … 达 /tr 二 ”再 粘贴 
几 次 就 插入 了 几 行 ,而 插入 列 在 代码 视图 中 不 方便 进行 。 


3. 设置 单元 格 中 内 容 居中 对 齐 的 方法 


在 默认 情况 下 ,表格 会 单独 占据 网 页 中 的 一 行 , 左 对 齐 排 列 。 表 格 具有 水 平 对 齐 属 性 
align, 可 以 设置 align 二 "center" 让 表格 水 平 居 中 对 齐 , 位 于 一 行 的 中 央 。 而 单元 格 二 td 二 
则 具有 水 平 对 齐 align 和 垂直 对 齐 valign 属性 ,它们 的 作用 是 使 单元 格 中 的 内 容 相 对 于 
单元 格 水 平 居中 或 垂直 居中 ,在 默认 情况 下 ,单元 格 中 的 内 容 是 垂直 居中 ,但 水 平 左 对 
齐 的 。 

如 果 在 单元 格 中 有 一 段 无 格式 的 文字 ,例如 : 


<t 中 版 权 所 有 scopy; 数 学 系 < /td> 


(1) 要 使 这 段 文字 在 单元 格 中 居中 对 齐 , 那 么 有 两 种 方法 可 以 做 到 。 一 是 在 设计 视 
图 中 选中 这 些 文字 ,然后 使 用 文本 自身 的 对 齐 属 性 来 居中 对 齐 。 即 单 击 图 2-28 中 中 处 的 
按钮 。 


4 所 可 ”村 [ 玩 习 _ es |nlz | 
不 民 司 可 [| 于 | 生生 | 过 


SEE 





图 2-28 单元 格 中 文本 对 齐 的 两 种 方法 


此 时 ,可 发 现 文本 已 经 居中 ,切换 到 代码 视图 ,代码 已 修改 为 : 

<td><div align= "center"> 版 权 所 有 goopy; 数 学 系 < /div>< /td> 

可 看 到 使 用 这 种 方法 对 齐 Dreamweaver 会 自动 为 文本 添加 一 个 div 标记 ,再 使 用 div 
标记 的 align 属性 使 文本 对 齐 ,这 是 因为 这 段 文本 没有 格式 标记 环绕 ,要 使 它们 居中 只 能 
添加 一 个 标记 ,如 果 这 有 段 文本 被 格式 标记 环绕 ,例如 p 标记 ,那么 就 会 直接 在 p 标记 中 添 
加 align 一 "center" 属 性 了 。 
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(2) 由 于 文本 位 于 单元 格 中 ,第 二 种 使 文本 居中 的 方法 是 利用 单元 格 的 居中 对 齐 属 
性 , 即 单 击 图 2-28 中 @ 处 的 按钮 ,可 发 现 文 本 也 能 居中 对 齐 ,在 代码 视图 查看 代码 如 下 : 


<tqd align= "center> 版权 所 有 gcopy; 数 学 系 < /to> 


可 看 到 第 二 种 方法 不 会 增加 一 个 标记 ,所 以 推荐 使 用 这 种 方法 对 齐 单 元 格 中 的 文本 。 


2.6.4 制作 固定 宽度 的 表格 


如 果 不 定义 表格 中 每 个 单元 格 的 宽度 , 当 向 单元 格 中 插入 网 页 元 素 时 ,表格 往往 会 变 
形 。 这 样 无 法 利用 表格 精确 定位 网 页 中 的 元 素 , 网 页 中 会 有 很 多 不 必要 的 空隙 ,使 网 页 显 
得 不 紧凑 也 不 美观 ,因此 要 利用 固定 宽度 的 表格 和 单元 格 精确 地 包围 住 其 中 的 内 容 。 制 
作 固 定 宽度 的 表格 通常 有 以 下 两 种 方法 : 

(1) 定义 所 有 列 的 宽度 ,但 不 定义 整个 表格 的 宽度 。 例 如 : 


< table border= "0" oellspacing= "0" oellpadding= "0"> 
<tr> 
< td widthe= "200"> gribsp;< /to> 
<td widthe= "360"> snbsp;< /td> 
< td width= "200"> snbsp;< /td> 
</tr>< /table> 
整个 表格 的 实际 宽度 为 : 所 有 列 的 宽度 和 十 边框 宽度 和 十 间距 和 十 填充 和 。 这 时 
候 , 只 要 单元 格 内 的 内 容 不 超过 的 单元 格 的 宽度 时 ,表格 不 会 变形 。 
(2) 定义 整个 表格 的 宽 , 如 500 像素 、98% 等 ,再 留 一 列 的 宽度 不 定义 ,未 定义 的 这 一 
列 的 宽度 为 整个 表格 的 宽度 一 已 定义 列 的 宽度 和 一 边框 宽度 和 一 间距 和 一 填充 和 ,同样 
在 插入 内 容 时 也 不 会 变形 。 
由 于 网 页 的 总 宽度 ,每 列 的 宽度 都 要 固定 ,所 以 制作 固定 宽度 的 表格 是 用 表格 进行 网 
页 布局 的 基础 。 而 网 页 布局 时 一 般 是 不 需要 指定 布局 表格 高 度 的 ,因为 随 着 单元 格 中 内 
容 的 增加 ,布局 表格 的 高 度 也 会 自 适应 的 增加 。 
因此 制作 固定 高 度 的 表格 相对 来 说 用 得 较 少 ,只 有 在 单元 格 中 插入 图 像 时 ,为 了 保证 
单元 格 和 图 像 之 间 没 有 间隙 ,需要 把 单元 格 的 宽 和 高 设置 为 图 像 的 宽 和 高 ,填充 .间距 和 
边框 值 都 设 为 0, 并 保证 单元 格 标记 内 除开 图 像 元 素 , 没 有 其 他 空格 或 换行 符 。 
提示 : 在 用 表格 布局 时 不 推荐 使 用 鼠标 拖 动 表 格 边 框 的 方式 来 调整 其 大 小 ,这 样 会 
在 表格 标记 内 自动 插入 width 和 height 属性。 如果 所 有 单元 格 的 宽 已 固定 ,又 定义 了 表 
格 的 宽度 ,那么 所 有 单元 格 的 宽度 都 会 按 比 例 发 生 改 变 , 导 致 用 表格 布局 的 网 页 里 的 内 容 
排列 混乱 。 


2.6.5 特殊 效果 表格 的 制作 
1. 制作 1 像素 ( 细 线 ) 边 框 的 表格 


一 般 来 说 ,1 像素 边框 的 表格 在 网 页 中 显得 更 美观 。 特 别 是 用 表格 做 栏目 框 时 ,1 像 
素 边框 的 栏目 框 是 大 部 分 网 站 的 选择 ,因此 ,制作 1 像素 边框 的 表格 已 成 为 网 页 设计 的 一 
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项 基本 要 求 。 
但 是 把 表格 的 边框 (border) 定 义 为 1 像素 时 (border 二 "1"), 其 实际 宽度 是 2 像素 。 
这 样 的 表格 边框 显得 很 粗 而 不 美观 。 要 制作 1 像素 的 细 线 边框 可 用 如 下 任意 一 种 方法 
(1) 用 间距 做 边框 。 原 理 是 通过 把 表格 的 背景 色 和 单元 格 的 背景 色调 整 成 不 同 的 颜 
色 , 使 间距 看 起 来 像 一 个 边框 一 样 ,再 将 表格 的 边框 设 为 0, 间距 设 为 1, 即 实现 1 像素 " 边 
框 ? 表 格 。 代 码 如 下 : 


< table border= "0" cellspacing= "1" bgoolor= 000000"> 
<tr>< td bgcolor= 哇 ffffff">1 像 素 边 框 表格 < /to>< /tr> 
< /table> 


(2) 用 CSS 属性 border-collapse 做 1 像素 边框 的 表格 。 先 把 表格 的 边框 (border) 设 
为 1, 间距 (cellspacing) 设 为 0, 此 时 表格 的 边框 和 单元 格 的 边框 紧 挨 在 一 起 ,所 以 边框 的 
宽度 为 1 十 1 二 2 像素。 这 是 因为 表格 的 CSS 属性 border-collapse 的 默认 值 是 separate， 
即 表 格 边框 和 单元 格 边框 不 重 肆 。 当 我 们 把 border-collapse 属性 值 设 为 collapse( 重 释 ) 
时 ,表格 边框 和 单元 格 边框 将 发 生 重生 ,因此 边框 的 宽度 为 1 像素 。 代 码 如 下 : 


< table border= "1" oellspacing= "0" bordercolor= "#f£f0000" style= "border- collapse: collapse"> …</ 
table> 


2. 制作 双 线 边框 表格 


将 表格 的 边框 颜色 (bordercolor) 属 性 设置 为 某 种 颜色 后 ,表格 的 上 暗 边 框 和 亮 边 框 会 
变 为 同一 种 颜色 (在 IE 中 单元 格 边 框 的 颜色 也 会 跟着 改变 ) ,边框 的 立体 感 消 失 。 此 时 只 
要 间距 (cellspacing) 不 设 为 0, 表格 的 边框 和 单元 格 的 边框 就 不 会 重合 ,如 果 设 置 表格 的 
边框 宽度 为 1 像素 , 则 显示 为 双 细 线 边框 表格 。 下 面 是 用 双 细 线 边框 表格 制作 的 栏目 框 ， 
效果 如 图 2-29 所 示 。 


< table width= "180" border= "1" oellpadding= "6" oellspacing= "3" bordercolor= 
啡 000000" bgcolor= "#ffffff"> 

<tr>< td bgcolor= 啡 ccococ"> 标 题 < /td> < /tr> 

< tr>< td height= "128" valign= "top" bordercolor= 叶 fffFfff"> 内 容 < /ta> 





</tr> 
< /table> 


由 于 非 下 浏览 器 无 法 改变 单元 格 边 框 的 颜色 ,因此 
这 种 双 线 边框 栏目 框 只 能 在 IE 8 以 下 的 版 本 中 看 到 效果 。 








3. 用 单元 格 制作 水 平 线 或 占 位 表格 


如 果 需 要 水 平 或 竖 直 的 线段 ,可 以 使 用 表格 的 行 或 列 
来 制作 ,例如 在 表格 中 需要 一 条 黑色 的 水 平 线段 , 则 可 以 
这 样 制作 : 先 把 某 一 行 的 行 高 设 为 1; 再 把 该 行 的 背景 色 图 2-29 下 中 双 线 边框 栏目 框 
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设 为 黑色 ;最 后 在 代码 视图 中 去 掉 此 行 单元 格 中 的 “&nbsp;” 占 位 符 空格 。 因 为 
“&.nbsp;” 是 Dreamweaver 在 插入 表格 时 自动 往 每 个 单元 格 中 添加 的 一 个 字符 ;如 果 不 
去 掉 ,IE 默认 一 个 字符 占据 12 像素 的 高 度 。 这 样 就 制作 了 一 条 1 像素 粗 的 水 平 黑 线 。 
代码 如 下 : 
< table width= "200" border= "0" oellpadding= "0" cellspacing= "0"> 
<tr><td height="]" bgcolor= 叭 000000"”>< /td> < 上 -单元 格 中 的 “snbsp;” 已 去 掉 --> 
< /tr> 
</table> 


如 果 要 制作 1 像素 粗 的 竖 直 黑 线 ,可 在 上 述 代码 中 将 表格 的 宽 修 改 为 1 像素 ,单元 格 
的 高 修改 为 竖 直 黑 线 的 长 度 即 可 。 

在 默认 情况 下 ,网 页 中 两 个 相 邻 的 表格 上 下 会 紧 挨 在 一 起 ,这 时 可 以 在 这 两 个 表格 中 
插入 一 个 占 位 表格 使 它们 之 间 有 一 些 间隙 ,例如 把 占 位 表格 的 高 度 设置 为 7 像素 ,边框 、 
填充 .间距 设 为 0, 并 去 掉 单 元 格 中 的 “&nbsp;”, 则 在 两 个 表格 间 插 入 了 一 个 7 像素 高 的 
占 位 表格 ,这 样 就 避免 了 表格 紧 挨 的 情况 出 现 ,因为 我 们 通常 都 不 希望 两 个 栏目 框 上 下 紧 
挨 在 一 起 。 当 然 , 通 过 对 表格 设置 CSS 属性 margin 能 更 容易 地 实现 留 空隙。 


4. 用 表格 制作 圆 角 栏目 框 


上 网 时 经 常 可 以 看 到 漂亮 的 圆 角 栏目 框 ,下 面 就 来 制作 一 个 固定 宽度 的 圆 角 栏目 框 ， 
如 图 2-30 所 示 。 由 于 表格 只 能 是 一 个 矩形 ,所 以 制作 圆 角 的 原 
理 是 在 圆 角 部 分 插入 圆 角 图 片 。 制 作 步 骤 如 下 ， 

(1) 准备 两 张 圆 角 图 片 , 分 别 是 上 圆 角 和 下 圆 角 的 图 像 。 和 

(2) 插入 一 个 三 行 一 列 的 表格 ,把 表格 的 填充 .间距 和 边框 | 人 
设 为 0, 宽 设置 为 190 像素 ( 圆 角 图 片 的 宽 ) ,高 不 设置 。 属性 调 到 宙 的 

(3) 分 别 设置 表格 内 三 个 单元 格 的 高 。 第 一 个 单元 格 高 设 
置 为 38 像素 (上 圆 角 图 片 的 高 ) ;第 二 个 单元 格 高 为 100 像素 ;第 图 2-30 用 表格 制作 的 
三 个 单元 格 高 为 17 像素 (下 圆 角 图 片 的 高 )。 在 第 1 和 第 3 个 单 圆 角 栏 目 杠 
元 格 内 分 别 插入 上 圆 角 和 下 圆 角 的 图 片 。 

(4) 把 第 二 个 单元 格 内 容 的 水 平 对 齐 方式 设置 为 居中 (align= "center") ,单元 格 的 背 
景 颜 色 设置 为 圆 角 图 片 边框 的 颜色 (bgcolor 一 "#E78BB2") 。 

(5) 这 时 在 第 二 个 单元 格 内 再 插入 一 个 一 行 一 列 的 表格 ,把 该 表格 的 间距 和 边框 设 
为 0, 填 充 设 为 8 像素 (让 栏目 框 中 的 内 容 和 边框 之 间 有 一 些 间隔 ) , 宽 设 为 186 像素 ,高 
为 100 像素 。 背 景 颜 色 设置 为 比 边框 浅 的 颜色 (bgcolor 一 "并 FAE4E6") 。 

提示 : 第 (5) 步 也 可 以 不 插入 表格 ,而 是 把 第 二 个 单元 格 拆 分 成 3 列 , 把 3 列 对 应 的 3 
个 单元 格 的 宽 分 别 设置 为 2 像素 .186 像素 和 2 像素 ,并 在 代码 视图 把 这 3 个 单元 格 中 的 
“&nbspi? 去 掉 , 然 后 把 第 1 和 第 3 列 的 背景 色 设置 为 国 角 边框 的 颜色 ,第 2 列 的 背景 色 
设 为 圆 角 背景 的 颜色 ,并 用 CSS 属性 设置 它 的 填充 为 8 像素 (style 一 "padding:8px'") 。 
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2.6.6 用 表格 进行 网 页 布局 


1-3-1 版 式 布 局 是 一 种 最 常用 的 网 页 版 面 布局 方式 ,也 是 学 习 其 他 复杂 版 面 布局 的 基 
础 , 它 可 以 通过 画 4 个 表格 实现 ,如 图 2-31 所 示 。 下 面 分 别 用 普通 表格 和 布局 模式 下 的 
表格 来 实现 如 图 2-31 所 示 的 布局 。 





Page Content 





图 2-31 1-3-1 版 面 布局 


用 表格 进行 网 页 布局 制作 如 图 2-31 所 示 网 页 的 步骤 如 下 : 

(1) 单 击 * 常 用 ?工具 栏 中 的 “表格 ?按钮 ,插入 一 个 一 行 一 列 的 表格 ,该 表格 用 于 放置 
Page Header, 将 表格 宽度 设置 为 768 像素 ,边框 .单元 格 边 距 和 单元 格 间距 都 设置 为 0， 
其 他 地 方 保持 默认 ,如 图 2-32 所 示 。 





图 2-32 ”插入 表格 对 话 框 


实际 上 也 可 以 不 在 这 里 设置 表格 参数 ,等 插入 表格 之 后 ,再 选中 该 表格 在 它 的 属性 面 
板 里 进行 设置 。 但 该 表格 对 话 框 具 有 记忆 功能 ,以 后 每 次 插入 表格 时 都 会 默认 显示 前 一 
次 设置 的 值 。 因 为 后 面 还 要 插入 几 个 宽度 相同 ,边框 , 边 距 .间距 都 为 0 的 表格 ,所 以 还 是 
在 这 里 设置 简便 些 。 

(2) 以 同样 的 方式 再 插入 一 个 一 行 一 列 的 表格 ,该 表格 用 于 放 导 航 条 (Nav bar) 。 

(3) 接着 再 插入 一 个 一 行 三 列 的 表格 ,该 表格 用 于 放 网 页 内 容 的 主体 ,将 左边 单元 格 
和 右边 单元 格 的 宽度 均 设置 为 200 像素 ,中 间 一 列 不 设置 宽度 。 然 后 在 属性 面板 中 将 三 
个 单元 格 的 “垂直 "对齐 方 式 均 改 为 顶端 对 齐 , 切 换 到 代码 视图 可 看 到 三 个 单元 格 的 二 td 
标记 中 均 添 加 了 一 个 属性 valign= "top"。 这 样 三 列 中 的 内 容 就 会 自动 从 上 到 下 排列 , 接 
下 来 可 以 为 左右 两 栏 的 单元 格 设置 背景 颜色 。 

(4) 最 后 再 插入 一 个 一 行 一 列 的 表格 ,用 于 放置 Page Footer 部 分 。 


2.6.7 表格 布局 实例 一 一 制作 太阳 能 网 站 
本 节 介绍 用 表格 布局 的 方法 制作 某 太阳 能 公司 网 站 ,由 于 太阳 能 热水器 是 一 种 绿色 
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环保 产品 ,因此 该 公司 网 页 以 绿色 为 主 色 调 , 采 用 深 绿色 和 黄 绿 色 搭 配 的 同类 色 配 色 方 案 
设计 ,整体 效果 如 图 2-33 所 示 。 网 页 的 布局 表格 结构 如 图 2-34 所 示 。 
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公司 简介 


策 阳 光 兽 太阳 能 有 限 公司 成 立 于 2005 年 11 月 18 日 ， 地 处 奖 阳 立新 开发 区 ， 是 由 BF 太阳 能 及 新 疆 新 能 源 股份 有 限 公司 
两 家 股东 控 强 强 互补 的 经 营 机 制 投资 设立 ， 光 萤 致 力 于 提供 和 发 展 高 同和 并 网 太阳 能 系统 ,拥有 专业 的 宁 购 、 生 产 
研发 、 销 售 和 项 目 工程 队伍 ， 为 您 来 量 身 定做 的 太阳 能 产品 和 了 大 服务 
我 们 致力 于 制造 高 计量 的 大 阳 能 幅 件 设计、 安装 、 准 
护 高 网 及 并 网 太阳能 系统 。 主 要 应 用 于 ; 4 
一 胃 讯 领域 、 铁 路 各 站 点 及 石油 徊 道 提供 可 靠 、 经 | 了 
济 、 几 乎 免 于 维护 的 太阳能 电源 。 3 
一 为 偏远 无 电 地 区 的 村 落 和 家庭 提 供 基 本 明明 、 医 (r¥ 
疗 、 教 育 所 需 电 力 
一 为 城市 建筑 提供 并 网 电力 。 
一 通过 太阳 能 系统 与 屋顶 ， 天 窗 、 再 增 、 过 阳 板 、 十 巡 
等 建筑 结构 完美 千 合 ,创造 出 建筑 美学 和 能 源 供应 相 结 合 的 
太阳 能 光伏 建筑 ( BIPY) 。 
在 合资 前 后 ,我 们 在 中 国 参与 了 各 种 乡村 供电 项 目 和 复杂 的 大 型 并 问 工程 ,为 各 类 客 户 提供 了 国际 领先 水 平 的 产 
品 和 服务 ， 主要 有 
一 源 江 台 州 东 机 岛 通讯 各 关 工程 一 岛 凤 上 的 移动 通讯 基站 太阳 能 供电 工程 














2-34 网 页 表格 布局 的 结构 图 


可 以 看 出 ,该 网 页 头 部 采用 一 个 一 行 两 列 的 表格 ,主体 部 分 也 是 一 个 一 行 两 列表 格 , 
以 便 将 它 分 成 两 栏 , 这 样 左 侧 栏 和 右 侧 栏 中 的 内 容 不 会 相互 产生 影响 。 
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1. 制作 网 页 的 头 部 


(1) 插入 一 个 一 行 两 列 的 表格 ,将 宽 设 为 852 像素 ,高 设 为 104 像素 ,并 将 表格 边框 、 
单元 格 边 距 (填充 ) .单元 格 间距 均 设 置 为 0。( 说 明 , 本 网 页 中 的 所 有 表格 都 是 用 作 布 局 
表格 ,布局 表格 通常 都 要 将 表格 边框 .填充 .间距 设 为 0, 以 下 的 表格 如 无 特殊 说 明 也 需 这 
样 设置 ) 。 

(2) 将 左边 单元 格 宽 设 为 161 像素 ,背景 色 设 为 并 99cc00。 

(3) 在 右边 单元 格 插入 一 张 图 片 images/logo. jpg。 

(4) 可 看 到 图 片 位 于 右边 单元 格 的 最 左边 ,为 了 使 图 片 向 右边 移 一 些 , 在 该 单元 格 左 
边 插 入 一 个 单元 格 ,方法 是 在 该 单元 格 中 右 击 ,选择 “表格 ”>“ 插 入 行 或 列 ” 一 “插入 列 ” 一 
“当前 列 之 前 ”菜单 命令 ,设置 宽 为 64 像素 ,此 时 图 片 向 右 移 动 了 64 个 像素 ,可 看 到 此 单 
元 格 起 到 了 一 个 占 位 的 作用 。 


2. 制作 网 页 的 主体 部 分 


(1) 在 网 页 头 部 表格 下 插入 一 个 一 行 两 列 的 表格 ,将 宽 设 为 852 像素 ,这 样 就 将 网 页 
主体 部 分 分 为 左右 两 栏 。 将 两 个 单元 格 都 设置 为 垂直 顶端 对 齐 (valign="top") (布局 单 
元 格 通常 都 应 有 此 设置 ,使 得 其 中 的 内 容 能 从 顶端 开始 往 下 排列 ) 。 

(2) 制作 左 侧 栏 部 分 ,将 左 侧 单元 格 宽 设 为 161 像素 ,高 设 为 617 像素 (网 页 制作 完 
成 后 可 将 该 高 度 属 性 去 掉 ) ,背景 色 设 为 #99cc00。 在 左 侧 栏 中 插入 一 个 一 行 一 列 的 表 
格 , 作 为 导航 栏 的 背景 , 宽 设置 为 100%% ,高 设置 为 181 像素 ,将 其 单元 格 的 背景 色 设 为 深 
绿色 (#00801b)。 

(3) 在 该 表格 中 插入 一 个 六 行 一 列 的 表格 用 于 放置 导航 按钮 ,将 宽 设 为 143 像素 (和 
导航 图 片 等 宽 ) ,将 表格 设 为 中 对 齐 。 

(4) 在 该 表格 的 每 个 单元 格 中 分 别 插入 一 个 导航 图 片 (dhl. jpg-dh6. jpg, 本 实例 中 所 
有 图 片 均 位 于 images 文件 夹 下 ) ,并 分 别 将 这 些 图 片 先 链接 到 “ #”( 空 链接 )。 

(5) 制作 右 侧 栏 中 的 Banner。 在 网 页 主体 表格 的 右 侧 单元 格 中 插入 一 个 一 行 一 列 的 
表格 ,设置 表格 宽 为 688 像素 ,高 为 181 像素 。 将 表格 的 背景 图 像 设置 为 images/bal. jpg 
(注意 ,此 处 一 定 要 将 图 片 作为 表格 的 背景 放 和 人 ,而 不 能 插入 图 片 ,否则 无 法 在 其 上 面 再 释 
放 Flash 文件 ) 。 

(6) 制作 “公司 简介 ”栏目 。 首 先 插入 一 个 三 行 一 列 的 表格 ,将 宽 设置 为 90% ,将 表格 
设置 为 居中 对 齐 。 

(7) 设置 第 一 个 单元 格 高 为 41 像素 ,设置 背景 图 像 为 images/bj. jpg, 背 景 图 像 默 认 
会 平 铺 满 单 元 格 ,再 在 该 单元 格 中 插 和 人 一 幅 图 像 images/ggd. jpg, 可 看 到 图 像 和 背景 图 像 
很 好 地 融合 在 了 一 起 ,如 图 2-35 所 示 。 

(8) 设置 第 二 个 单元 格 高 为 21 像素 ,起 | \ 二 
占 位 的 作用 。 插入 图 像 gedjpg 。 单元 格 <td> 背景 图 像 bjipg 

(9) 在 第 三 个 单元 格 中 插入 一 段 公司 简 图 2-35 在 单元 格 中 同时 使 用 
介 的 文本 。 图 像 和 背景 图 像 
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(10) 在 文本 中 间 插入 一 幅 客服 的 图 像 images/in. jpg, 为 了 使 该 图 像 能 够 被 文字 环 
绕 , 设 置 该 图 像 的 对 齐 方式 为 右 对 齐 (align 一 "right")。 


3. 完善 网 页 及 插入 Flash 


(1) 现在 网 页 主体 已 基本 呈现 ,下 面 进行 一 些微 调 。 可 看 到 此 时 公司 简介 栏目 表格 
与 banner 表格 紧 挨 在 一 起 ,不 美观 。 我 们 在 两 者 之 间 插 入 一 个 占 位 表格 (方法 是 将 光标 
移动 到 公司 简介 栏目 表格 的 左边 ) ,设置 该 表格 宽 为 100% ,高 为 16 像素 。 

(2) 制作 网 页 底部 版 权 部 分 。 在 公司 简介 表格 下 插入 一 条 水 平 线 , 方 法 是 将 工具 栏 
切换 到 HTML, 插 入 “水 平 线 ”, 再 在 属性 面板 中 设置 其 宽 为 900% ,高 为 1 像素 ,居中 对 齐 ， 
无 阴影 。 青 切换 到 代码 视图 ,对 二 hr/ 二 标记 设置 属性 (color 二 "gray") 以 改变 水 平 线 的 颜 
色 。 再 在 下 面 插入 一 段 版 权 说 明文 本 ,设置 该 文本 为 居中 对 齐 。 

(3) 插入 Flash。 在 放置 网 页 banner 的 单元 格 中 插入 一 幅 Flash(images/ba. swf)， 
执行 “插入 ”一 “媒体 ”一 Flash 菜单 命令 。 在 “属性 ”面板 中 设置 Flash 宽 为 400 像素 ,高 为 
100 像素 。 再 选中 该 Flash, 单 击 “ 参 数 ” 按 钮 ,设置 参数 wmode 值 transparent, 使 Flash 
能 透明 显示 。 

(4) 调整 该 Flash 在 banner 上 的 位 置 ,方法 是 选中 放置 banner 图 片 的 表格 ,设置 该 
表格 的 填充 值 为 28 像素 ,这 样 Flash 与 单元 格 左边 会 有 28 像素 的 距离 。 

(5) 用 CSS 设置 网 页 主体 的 右边 框 线 (方法 是 在 网 页 主体 表格 的 右 侧 单 元 格 二 td 二 
标记 中 加 入 属性 style 二 " border-right: #daeda3 1px solid")。 

(6) 为 了 改变 网 页 中 所 有 字体 的 大 小 、 颜 色 . 行 高 ,必须 用 CSS 设置 文本 样式 ,在 网 页 
头 部 区 域 加 入 “二 style 之 td{font-size: 9pt;line-height: 18pt; color: #333;} 达 /style>” 
即 可 。 

提示 : 如 果 要 在 当前 表格 上 方 插入 一 个 表格 ,可 将 光标 移动 到 该 表格 左 侧 再 插入 表 
格 ;如 果 要 在 当前 表格 下 方 插入 一 个 表格 ,可 将 光标 移动 到 该 表格 右 侧 再 插入 表格 。 


2.7 创建 表单 


表单 是 浏览 器 与 服务 器 之 间 交 互 的 重要 手段 ,利用 表单 可 以 收集 客户 端 提交 的 有 关 
信息 。 例 如 如 图 2-36 所 示 的 是 用 户 注 册 表 单 ,用 户 单 击 “ 提 交 ” 按 钮 后 表单 中 的 信息 就 会 
发 送 到 服务 器 。 

表单 由 表单 界面 和 服务 器 端 程序 (如 PHP) 两 部 分 构成 。 表 单 界面 由 HTML 代码 编 
写 ,服务 器 端 程序 用 来 收集 用 户 通过 表单 提交 的 数据 。 本 节 只 讨论 表单 界面 的 制作 。 在 
HTML 代码 中 ,可 以 用 表单 标记 定义 表单 ,并 且 指 定 接收 表单 数据 的 服务 器 端 程序 文件 。 

表单 处 理 信息 的 过 程 为 : 当 单 击 表单 中 的 “提交 ”按钮 时 ,在 表单 中 填写 的 信息 就 会 
发 送 到 服务 器 ,然后 由 服务 器 端的 有 关 应 用 程序 进行 处 理 , 处 理 后 或 者 将 用 户 提交 的 信息 
存储 在 服务 器 端的 数据 库 中 ,或 者 将 有 关 的 信息 返回 到 客户 端 浏览 器 。 
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用 户 注册 (基本 信息 ) 
wv 可 
用 户 名 | 
性 别 
论坛 密码 | V Ne 
一 这 克 人 [eeeooer | wW 3 
请 再 答 一 这 确认 fe 
Mai lanatz3@iomcom | YJ 
EMal llangt23@omcom | 


请 回答 注册 问题 。 23 十 (5*2) 一 ? 
你 的 回答 是 |33 
sm 放量 生 
高 级 选项 “ 口 显示 高 级 用 户 设置 选项 


网 同意 并 接受 注册 协议 [a] 重 置 











图 2-36 用户 注册 表单 


2.7.1 二 form 之 标记 及 其 属性 


去 form 之 标记 用 来 创建 一 个 表单 , 即 定义 表单 的 开始 和 结束 位 置 ,这 一 标记 有 几 方 
面 的 作用 。 首 先 , 限 定 表单 的 范围 ,一 个 表单 中 的 所 有 表单 域 标记 ,都 要 写 在 二 form 之 与 
去 /form> 之 间 , 单 击 * 提 交 ?” 按 钮 时 ,提交 的 也 是 该 表单 范围 内 的 内 容 。 其 次 ,携带 表单 
的 相关 信息 ,例如 处 理 表单 的 脚本 程序 的 位 置 (action) ,提交 表单 的 方法 (method) 等 ,这 
些 信 息 对 于 浏览 者 是 不 可 见 的 ,但 对 于 处 理 表单 却 起 着 决定 性 的 作用 。 

二 form 之 标记 中 包含 的 表单 域 标记 通常 有 二 input 盖 、 二 select 二 和 所 textarea 二 等 。 
图 2-37 展示 了 Dreamweaver 的 表单 工具 栏 中 各 种 表单 元 素 与 标记 的 对 应 关系 。 


对 应 标记 : form input textarea input select input labelfieldset 
图 2-37 表单 元 素 和 表单 标记 的 对 应 关系 


在 图 2-37 中 单 击 “表单 ”按钮 ( 国 ) 后 ,就 会 在 网 页 中 插入 一 个 表单 二 form 二 标记 ,此 
时 会 在 “属性 ”面板 中 显示 二 form 这 标记 的 属性 设置 ,如 图 2-38 所 示 。 









2-38 ”一 form 放 标记 的 “属性 ”面板 


二 form 这 标记 具有 的 属性 如 下 : 
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1. name 属性 


在 图 2-38 中 ,“ 表 单 名 称 ” 对 应 name 属性 ,可 设置 一 个 唯一 的 名 称 以 标识 该 表单 ,如 
二 form name 一 "forml" 过 ,该 名 称 仅 供 JavaScript 代码 调用 表单 中 的 元 素 。 


2. action 属性 


“动作 ”对 应 表单 的 action 属性 。action 属性 用 来 设置 接收 表单 内 容 的 程序 文件 的 
URL。 例 如 ,二 form action 王 "admin/check. php" 二 ,表示 当 用 户 提交 表单 后 ,将 转 到 
admin 目录 下 的 check. php 页 面 ,并 由 check. php 接收 发 送 来 的 表单 数据 ,该 文件 执行 完 
毕 后 (通常 是 对 表单 数据 进行 处 理 ) ,将 返回 执行 结果 (生成 的 静态 页 ) 给 浏览 器 。 

在 “动作 ”文本 框 中 可 输入 相对 URL 或 绝对 URL。 如 果 不 设置 action 属性 ( 即 
action 一 ”"") ,表单 中 的 数据 将 提交 给 表单 自身 所 在 的 文件 ,这 种 情况 常见 于 将 表单 代码 
和 处 理 表单 的 程序 写 在 同一 个 动态 网 页 中 的 情况 ,否则 将 没有 接收 和 处 理 表单 内 容 的 
程序 。 

3. method 属性 


“方法 ”对 应 二 form 过 的 method 属性 ,定义 浏览 器 将 表单 数据 传递 到 服务 器 的 方式 。 
取 值 只 能 是 GET 或 POST( 默 认 值 是 GET)。 例如 : 


< form method= "post"> 


(1) 使 用 GET 方式 时 ,Web 浏览 器 将 各 表单 字段 名 称 及 其 值 按 照 URL 参数 格式 的 
形式 , 附 在 action 属性 指定 的 URL 地 址 后 一 起 发 送 给 服务 器 。 例 如 ,一 个 使 用 GET 方 
式 的 form 表单 提交 时 ,在 浏览 器 地 址 栏 中 生成 的 URL 具有 类 似 下 面 的 形式 : 


http://ec.hynu.cn/admin/check.phpamame= alioegpassword= 123 


GET 方式 生成 的 URL 格式 为 : 每 个 表单 域 元 素 名 称 与 取 值 之 间 用 等 号 “二 ”分 隔 ， 
形成 一 个 参数 ;各 个 参数 之 间 用 “&.” 分 隔 ; 而 action 属性 所 指定 的 URL 与 参数 之 间 用 问 
号 “?? 分 隔 。 

(2) 使 用 POST 方式 时 ,浏览 器 将 把 各 表单 域 元 素 名 称 及 其 值 作 为 HTTP 消息 的 实 
体内 容 发 送 给 Web 服务 器 ,而 不 是 作为 URL 参数 传递 。 因 此 ,使 用 POST 方式 传送 的 
数据 不 会 显示 在 地 址 栏 中 。 

提示 : 不 要 使 用 GET 方式 发 送 大 数据 量 的 表单 (例如 ,表单 中 有 文件 上 传 域 时 )。 因 
为 URL 长 度 最 多 只 能 有 8192 个 字符 ,如 果 发 送 的 数据 量 太 大 ,数据 将 被 截断 ,从 而 导致 
发 送 的 数据 不 完整 。 另 外 ,在 发 送 机 密 信 息 时 (如 用 户 名 和 口令 、 信 用 卡号 等 ) ,不 要 使 用 
GET 方式 ;否则 ,浏览 者 输入 的 口令 将 作为 URL 显示 在 地 址 栏 上 ,而 且 还 将 保存 在 浏览 
器 的 历史 记录 文件 和 服务 器 的 日 志文 件 中 。 因 此 ,GET 方式 不 适合 于 发 送 有 机 密 性 要 求 
的 数据 和 发 送 大 数据 量 数 据 的 场合 。 
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4. enctype 属性 


“MIME 类 型 "对 应 二 form 二 的 enctype 属性 ,用 来 指定 表单 数据 在 发 送 到 服务 器 之 
前 应 该 如 何 编 码 。 默 认 值 为 “application/x-www-form-urlencode”, 表 示 表 单 中 的 数据 被 
编码 成 “名 三 值 ? 对 的 形式 ,因此 在 一 般 情况 下 无 须 设 置 该 属性 。 但 如 果 表 单 中 含有 文件 
上 传 域 , 则 需 设置 该 属性 为 “multipart/form-data”, 并 设置 提交 方式 为 POST。 


5. target 属性 


“目标 ?对 应 过 form 之 的 “target” 属 性 , 它 指 当 提交 表单 时 ,action 属性 所 指定 的 网 页 
以 何 种 方式 打开 (在 新 窗口 还 是 原 窗 口 ), 取 值 有 4 种 ,其 含义 和 二 a 二 标记 的 target 属性 
相同 ( 见 表 2-6)。 


2.7.2 二 input/ 二 标记 


< 所 input/ 二 标记 是 用 来 收集 用 户 输入 信息 的 标记 , 它 是 一 个 单 标记 ,一 input/ 二 至少 
应 具有 两 个 属性 : 一 是 type 属性 ,用 来 决定 这 个 一 input 二 标记 的 含义 ,type 属性 共有 10 
种 取 值 ,各 种 取 值 的 含义 如 表 2-8 所 示 ; 二 是 name 属性 ,用 来 定义 该 表单 域 标记 的 名 称 ， 
如 果 没 有 该 属性 ,虽然 不 会 影响 表单 的 界面 ,但 服务 器 将 无 法 获取 该 表单 域 提交 的 数据 。 


表 2-8 二 input 标记 的 type 属性 取 值 含义 





























type 属性 值 二 type 属性 值 含义 

text 文本 框 submit 提交 按钮 

password 密码 框 reset 重 置 按钮 

radio 单 选 框 button 普通 按钮 

checkbox 复 选 框 image 图 像 按 钮 

file 文件 域 hidden 隐藏 域 
1. 单行 文本 框 


当 二 input/ 二 的 type 属性 为 text 时 , 即 : 过 input type 二 "text"…/ 记 ,将 在 表单 中 创 
建 一 个 单行 文本 框 ,如 图 2-39 所 示 。 文 本 框 用 来 收集 用 户 输入 的 少量 文本 信息 。 例 如 : 


姓名 : < input type= "text" name= "user" size= "20" /> 


表示 该 单行 文本 框 的 宽度 为 20 个 字符 ,名 称 属性 为 user。 

如 果 用 户 在 该 文本 框 中 输入 了 内 容 ( 假 设 输入 的 是 Tom) ,那么 提交 表单 时 ,提交 给 
服务 器 的 数据 就 是 “user 一 Tom”, 即 表单 提交 的 数据 总 是 “name 一 value” 对 的 形式 。 由 于 
name 属性 值 为 user, 而 文本 框 的 value 属性 值 为 文本 框 中 的 内 容 , 因 此 有 以 上 结果 。 如 果 用 
户 没有 在 该 文本 框 中 输入 内 容 , 那 么 提交 表单 时 ,提交 给 服务 器 的 数据 就 是 “user 一 ”。 

在 初次 打开 网 页 时 文本 框 一 般 是 空 的。 如 果 要 使 文本 框 显示 初始 值 , 可 设置 其 value 
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属性 ,value 属性 的 值 将 作为 文本 框 的 初始 值 显 示 。 如 果 和 希望 单 击 文本 框 时 清空 文本 框 中 
的 值 ,可 对 onfocus 事件 编写 JavaScript 代码 ,因为 单 击 文本 框 时 会 触发 文本 框 的 onfocus 
事件 。 示 例 代 码 如 下 ,效果 如 图 2-39 所 示 。 文 本 框 和 密码 框 的 常用 属性 如 表 2-9 所 示 。 


查询 < input type= "text" narer "seadh" valuer "请 输入 关键 字 " anfoous= "this.vahe= 

















"mp 
查询 后 殴 XF 呈 宁 | 查询 ”| 
图 2-39 设置 了 value 属性 值 的 文本 框 在 网 页 载 入 时 ( 左 ) 和 单 击 后 ( 右 ) 
表 2-9 文本 框 和 密码 框 的 常用 属性 
属性 名 功 能 示 例 
gant 设置 文本 框 中 的 初始 内 容 , 如 不 设置 , 则 文本 框 显示 的 初始 value 二 "请 在 此 输入 " 
内 容 为 空 。 用 户 输入 的 内 容 将 会 作为 value 属性 的 最 终 值 
size 指定 文本 框 的 宽度 ,以 字符 个 数 为 度量 单位 size 一 "16" 
maxlength | 设置 用 户 能 够 输入 的 最 多 字符 个 数 maxlength= "11" 
disabled de pe sh dnp yy 病 ) 可 交 志 第 时 5 也 不 会 将 disabled= "disabled" 








提示 : readonly 可 防止 用 户 对 值 进行 修改 ,直到 满足 某 些 条 件 为 止 (比如 选中 了 一 个 
复 选 框 ) ,此 时 需要 使 用 JavaScript 清除 readonly 属性 。disabled 可 应 用 于 所 有 表单 
元 法 


2. 密码 框 


当 一 input/ 二 的 type 属性 为 password 时 ,表示 该 二 input/ 二 是 一 个 密码 框 。 密 码 框 
和 文本 框 基 本 相同 ,只 是 用 户 输入 的 字符 会 以 圆 点 显示 ,以 防 被 旁人 看 到 。 但 表单 发 送 数 
据 时 仍然 会 把 用 户 输入 的 真实 字符 作为 其 value 值 以 不 加 密 的 


形式 发 送 给 服务 器 。 示 例 代码 如 下 ,显示 效果 如 图 2-40 所 示 。 。 窗 隐 
图 2-40 ”密码 框 
密码 : < input type= "password" name= "pw" size= "15" /> 


3 单 选 按钮 


二 input type 二 "radio" …/ 记 用 于 在 表单 上 添加 一 个 单 选 按钮 ,但 单 选 按钮 需要 成 组 
使 用 才 有 意义 。 只 要 将 多 个 单 选 按钮 的 name 属性 值 设置 为 相同 ,它们 就 形成 一 组 单 选 
按钮 。 浏 览 器 只 允许 一 组 单 选 按 钮 中 的 一 个 被 选中 。 当 用 户 提 交 表 单 时 ,在 一 个 单 选 按 
钮 组 中 ,只 有 被 选中 的 那个 单 选 按 钮 的 名 称 和 值 ( 即 name/value 对 ) 才 会 被 发 送 给 服 
务 器 。 
因此 同 组 的 每 个 单 选 按钮 的 value 属性 值 必须 各 不 相同 ,以 实现 选中 不 同 的 单 选项 ， 
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就 能 发 送 同一 name 不 同 value 值 的 功能 。 下 面 是 一 组 单 选 按钮 的 代码 ,效果 如 图 2-41 
所 示 。 





性 别 : 男 < input type= "radio" name= "sex" value= "1" hecked= "hecked" /> 
女 <input type= "radio" name= "sex" value= "2" /> 


其 中 ,checked 属性 设 定 初始 时 单 选 按 钮 哪 项 处 于 选 定 状态 ,不 设 定 表 示 都 不 选中 。 
4. 复 选 框 


二 input type 二 "checkbox" /二 用 于 在 表单 上 添加 一 个 复 选 框 。 复 选 框 可 以 让 用 户 
选择 一 项 或 多 项 内 容 , 复 选 框 的 一 个 常见 属性 是 checked, 该 属性 用 来 设置 复 选 框 初始 状 
态 时 是 否 被 选中 。 复 选 框 的 value 属性 只 有 在 复 选 框 被 选中 时 才 有 效 。 如 果 表单 提交 
时 , 某 个 复 选 框 是 未 被 选中 的 ,那么 复 选 框 的 name 和 value 属性 值 都 不 会 传递 给 服务 器 ， 
就 像 没有 这 个 复 选 框 一 样 。 只 有 某 个 复 选 框 被 选中 , 它 的 名 称 (name 属性 值 ) 和 值 (value 
属性 值 ) 才 会 传递 给 服务 器 。 下 面 的 代码 是 一 个 复 选 框 的 例子 ,显示 效果 如 图 2-42 所 示 。 

爱好 : <input name= "favl" type= "checkbox" value= "1" /> 跳舞 

< input name= "fav2" type= "checkbox" value= "2" /> 散步 
< input name= "fav3" type= "checkbox" value= "3" /> 唱歌 


性 别 ， 男 仿 妇 人 爱好 口 跳舞 口 散步 三 唱歌 
图 2-41 单 选 按钮 图 2-42 复 选 框 


提示 : 从 以 上 示例 可 看 出 ,选择 类 表单 标记 ( 单 选 框 \ 复 选 框 或 下 拉 列 表 框 等 ) 和 输入 
类 表单 标记 (文本 域 . 密 码 域 、 多 行文 本 域 等 ) 的 重要 区 别 是 : 选择 类 标记 必须 事先 设 定 每 
个 元 素 的 value 属性 值 ,而 输入 类 标记 的 value 属性 值 一 般 由 用 户 输入 ,可 以 不 设 定 。 


5. 文件 上 传 域 


到 input type 二 "file" …/ 二 是 表单 的 文件 上 传 域 ,用 于 浏览 器 通过 表单 向 服务 器 上 传 
文件 。 使 用 二 input type= "file" /元 素 ,浏览 器 会 自 


动 生成 一 个 文本 框 和 一 个 “浏览 …” 按 钮 ,供用 户 选择 上 sl 
传 到 服务 器 的 文件 ,示例 代码 如 下 ,效果 如 图 2-43 所 示 。 图 345. 奖 休 上 各 域 


< input type= "file" name= "upfile" /> 


用 户 可 以 使 用 “浏览 …” 按 钮 打开 一 个 文件 对 话 框 ,选择 要 上 传 的 文件 ,也 可 以 在 文本 
框 中 直接 输入 本 地 的 文件 路 径 名 。 

注意 : 如 果 二 form 记 标记 中 含有 文件 上 传 域 , 则 一 form 记 标记 的 enctype 属性 必须 
设置 为 “multipart/form-data”, 并 且 method 属性 必须 是 post。 


6. 隐藏 域 
二 input type 二 "hidden" …/ 放 是 表单 的 隐藏 域 ,隐藏 域 不 会 显示 在 网 页 中 ,但 是 当 提 
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交 表单 时 ,浏览 器 会 将 这 个 隐藏 域 元素 的 name/value 属性 值 对 发 送 给 服务 器 。 因 此 隐藏 
域 必须 具有 name 属性 和 value 属性 ,否则 毫 无 作用 。 例 如 : 


< input type= "hidden" name= "User" value= "Alioce" /> 


隐藏 域 是 网 页 之 间 传 递 信 息 的 一 种 方法 。 例 如 ,假设 网 站 的 用 户 注 册 过 程 由 两 个 步 
又 完成 ,每 个 步骤 对 应 一 个 网 页 文件 。 用 户 在 第 一 步 的 表单 中 输入 了 用 户 名 ,接着 进入 第 
二 步 的 网 页 中 ,在 这 个 网 页 中 填写 爱好 和 特长 等 信息 。 在 第 二 个 网 页 提交 时 ,要 将 第 一 个 
网 页 中 收集 到 的 用 户 名 也 传送 给 服务 器 ,这 就 需要 在 第 二 个 网 页 的 表单 中 加 入 一 个 隐藏 
域 ,让 它 的 value 值 等 于 接收 到 的 用 户 名 。 


2.7.3 所 select 之 和 二 option 之 标记 


所 select> 标 记 表 示 下 拉 框 或 列表 框 ,是 一 个 标记 的 含义 由 其 size 属性 决定 的 元 素 。 

如 果 该 标记 没有 设置 size 属性 ,那么 就 表示 是 下 拉 列 表 框 。 如 果 设置 了 size 属性 , 则 变 成 

了 列表 框 ,列表 的 行 数 由 size 属性 值 决定 。 如 果 还 设置 ”中 sb， 可 
硼 南 





了 multiple 属性 , 则 表示 列表 框 允许 多 选 。 下 拉 列 表 框 中 5 
的 每 一 项 由 一 option 之 标记 定义 ,还 可 使 用 一 optgroup 二 we 
标记 添加 一 个 不 可 选中 的 选项 ,用 于 给 选项 进行 分 组 。 图 2-44 下 拉 列 表 框 ( 左 ) 
例如 ,下 面 代码 的 显示 效果 如 图 2-44 所 示 。 和 列表 框 ( 右 ) 


所 在 地 : < select name= "addr"> <!-- 添 加 属性 size="5" 则 为 图 2- 4 右边 的 列表 框 --> 
< cption value= "1"> 湖 南 < /option> 
<option value= "2"> 广 东 < /aption> 
<cption value= "3 > 江苏 < /option> 
< cption value= "4"> 四川 < /option> < /select> 
提交 表单 时 ,select 标记 的 name 值 将 与 选中 项 的 value 值 一 起 作为 name/value 信息 
对 传送 给 服务 器 。 如 果 志 option 二 标记 没有 设置 value 属性 ,那么 提交 表单 时 ,将 把 选中 
项 中 的 文本 (例如 “湖南 ”) 作 为 name/value 信息 对 的 value 部 分 发 送 给 服务 器 。 


2.7.4 多 行文 本 域 标记 二 textarea 二 


二 textarea 二 是 多 行文 本 域 标记 ,用 于 让 浏览 者 输入 多 行文 本 ,如 发 表 评 论 或 留言 等 。 
去 textarea> 是 一 个 双 标 记 , 它 没有 value 属性 ,而 是 将 标记 中 的 内 容 显 示 在 多 行文 本 框 
中 ,提交 表单 时 也 是 将 多 行文 本 框 中 的 内 容 作 为 value 值 提交 。 例 如 : 


< textarea name= "Comments" co1s= "40" rows= "4" wrap= "virtual"> 表示 是 一 个 有 4 行 ,每 行 可 容纳 40 个 
字符 ,换行 方式 为 虚拟 换行 的 多 行文 本 域 。< /textarea> 











二 textarea 二 的 属性 有 : 

(1) cols 一 一 用 来 设置 文本 域 的 宽度 ,单位 是 字符 。 

(2) rows 用 来 设置 文本 域 的 高 度 ( 行 数 )。 

(3) wrap 一 一 设置 多 行文 本 的 换行 方式 ,默认 值 为 virtual, 其 取 值 有 三 种 ,含义 如 下 : 





GD 关 (off) 





不 让 文本 换行 。 当 用 户 输入 的 内 容 超过 文本 区 域 的 右边 界 时 ,文本 将 
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向 左 侧 滚动 ,不 会 换行 。 用 户 必须 按 Enter 键 才能 将 插入 点 移动 到 文本 区 域 的 下 一 行 。 
@ 虚拟 (virtual) 一 一 表示 在 文本 区 域 中 设置 自动 换行 。 当 用 户 输入 的 内 容 超 过 文 
本 区 域 的 右边 界 时 ,文本 换行 到 下 一 行 。 当 提交 数据 进行 处 理 时 ,换行 符 并 不 会 添加 到 数 
据 中 。 
@ 实体 (physical) 一 一 文本 在 文本 域 中 也 会 自动 换行 ,但 是 当 提交 数据 进行 处 理 时 ， 
会 把 这 些 自动 换行 符 转换 为 二 br/ 二 标记 添加 到 数据 中 。 


2.7.5 表单 数据 的 传递 过 程 
1. 表单 向 服务 器 提交 的 信息 内 容 
当 单 击 表单 的 “提交 ”按钮 后 ,表单 将 向 服务 器 发 送 表 单 中 填写 的 信息 ,发送 形式 是 各 


个 表单 元 素 的 “name= value &. name 二 value & name 一 
value…”。 下 面 以 图 2-45 中 的 表单 为 例 来 分 析 表 单 向 
服务 器 提交 的 内 容 ( 输 入 的 密码 是 123) ,该 表单 的 代码 
如 下 : 


< form action= "login.php" method= "post"> 
< 户 用 户 名 : < input name= "user" id= "am" 
type= "text" size="15" />< /p> 
i pe gy 图 2-45 一 个 输入 了 数据 的 表单 
size= ml5" />< /E> 
< 户 性 别 : 男 < input type= "radio" name= "sex" 
value= "1" /> 














女 < input type= "radio" name= "sex" value= "2" />< /p> 
< 户 爱 好 :< input name= "favl" type= "checkbox"” value= "1" 人 > 跳舞 
< input name= "fav2" type= "checkbox" value= "2" /> 散步 
< input name= "fav3" type= "checkbox" value= "3" /> 唱歌 < /p> 
< 户 所 在 地 :< select name= "addr"> 
<option valuer md 长沙 < /option> 
<cption value= "2"> 湘 潭 < /option> 
<option value= "3 必 > 衡阳 < /option> 
</select>< /p> 
< 户 个 性 签名 : <br/>< textarea name= "sign"> < /textarea> < /p> 
< < input type= "sutmit" name= "Sutmit" value= 提交 " />< /p> 
< /fom> 
表单 向 服务 器 提交 的 内 容 总 是 name/value 信息 对 ,对 于 文本 类 输入 框 来 说 ,value 的 
值 是 用 户 在 文本 框 中 输入 的 字符 。 对 于 选择 框 ( 单 选 框 \ 复 选 框 和 列表 菜单 ) 来 说 ,value 
的 值 必须 事先 设 定 , 只 有 某 个 选项 被 选中 后 它 的 value 值 才 会 生效 。 因 此 图 2-45 提交 的 
数据 是 : 


user= tangapwr= 123gsex— lsfav2- 2&fav3- 35addr= 35&sign= wosSutmit 提 交 
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提示 : 


(1) 如 果 表 单 只 有 一 个 提交 按钮 , 则 可 去 掉 它 的 name 属性 (如 name 王 "Submit") , 防 
止 提 交 按 钮 的 name/value 属性 对 也 一 起 发 送 给 服务 器 ,因为 这 些 是 多 余 的 。 

(2) 所 form 之 标记 的 name 属性 通常 是 为 JavaScript 调用 该 form 元 素 提 供 方 便 的 ， 
没有 其 他 用 途 。 如 果 没 有 JavaScript 调用 该 form, 则 可 省 略 其 name 属性 。 


2. 表单 的 三 要 素 


一 个 最 简单 的 表单 必须 具有 以 下 三 部 分 内 容 : 
(1) 二 form 志 标记 ,没有 它 表单 中 的 数据 不 知道 提交 到 哪里 去 ,并 且 不 能 确定 这 个 表 
单 的 范围 ; 
(2) 至 少 有 一 个 输入 域 (如 input 文本 域 或 选择 框 等 ), 这 样 才 能 收集 到 用 户 的 信息 ， 
否则 没有 信息 提交 给 服务 器 ; 
(3) 提交 按钮 ,没有 它 表单 中 的 信息 无 法 提交 (当然 ,如 果 使 用 Ajax 等 高 级 技术 提交 
表单 ,表单 也 可 以 不 具有 过 form> 标 记 和 提交 按钮 ,但 本 章 不 讨论 这 些 ) 。 
我 们 可 查看 百度 首页 中 表单 的 源 代码 ,这 算是 一 个 最 简单 的 表单 了 , 它 的 源 代码 如 下 
(可 见 它 具 有 上 述 的 表单 三 要 素 , 因 此 是 一 个 完整 的 表单 ): 
< fom name= f action= s> 
< input type= text name= wd id- kw size= 42 maxlength= 100> 
< :input type= submit value= 百 度 一 下 id= sb>…… 
< /fomm 


2.7.6 表单 中 的 按钮 
我 们 已 经 知道 ,在 表单 中 可 以 用 过 input 二 标记 创建 按钮 ,只 要 设置 它 的 type 属性 为 
submit 就 创建 了 一 个 提交 按钮 ;设置 type 属性 为 image 就 创建 了 一 个 图 像 按钮 ,它们 都 
可 以 用 来 提交 表单 ;设置 type 属性 为 reset 则 是 一 个 重 置 按钮 ,设置 type 属性 为 button 
就 是 一 个 普通 按钮 , 它 需 要 配合 JavaScript 脚本 使 其 具有 相应 的 功能 ,如 表 2-10 所 示 。 
表 2-10 用 input 标记 创建 按钮 时 的 type 属性 类 型 设置 




















type 属性 类 型 功 能 作 用 
到 input type 一 "submit” /> 提交 按钮 提交 表单 信息 
一 input type= "image" /> 图 像 按钮 用 图 像 做 的 提交 按钮 ,也 是 提交 表单 信息 
input type= "reset" /> 重 置 按钮 将 表单 中 的 用 户 输入 全 部 清空 
<input type= "button" /> 普通 按钮 需要 配合 JavaScript 脚本 使 其 具有 相应 的 功能 


但 是 ,一 input type 二 "submit" /请 标记 创建 的 按钮 默认 效果 是 没有 图 片 的 ,而 图 像 
按钮 虽然 有 图 像 但 是 不 能 添加 文字 。 实 际 上 ,在 HTML 中 有 个 二 button 之 标记 , 它 可 以 
创建 既 带 有 图 片 又 有 文字 的 按钮 ,效果 如 图 2-46 所 示 。 
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至于 @ 注 册 | 
图 2-46 ”普通 提交 按钮 .图 像 按 钮 与 button 标记 创建 的 提交 按钮 比较 


使 用 二 button 二 标记 创建 按钮 时 的 代码 如 下 : 

<button type= "stubmit"> < img src= "check.png" aligrn= "absmiddle"/> 登 录 

< /poutton> 

当然 ,还 有 一 种 思路 是 用 a 标记 来 模拟 按钮 ,但 那样 就 需要 CSS 和 JavaScript 的 配 
合 。 通 过 CSS 使 a 元 素 具 有 边框 ,再 添加 JavaScript 脚本 使 其 具有 提交 表单 的 功能 。 


2.7.7 表单 的 辅助 标记 
1. 二 label 二 标记 


三 label 二 标记 用 来 为 控件 定义 一 个 标签 , 它 通 过 for 属性 绑 定 控件 。 如 果 表 单 控件 
的 id 属性 值 和 label 标记 的 for 属性 值 相同 ,那么 label 标记 就 会 和 表单 控件 关联 起 来 。 
通过 在 Dreamweaver 中 插入 表单 控件 时 选择 “使 用 for 属性 附加 标签 标记 ”可 快捷 地 插入 
label 标记 。 例 如 : 
< input type= "radio" name= "sex" value= "radicbutton" idF "male" /> 
< label for= "male"> 男 < /label><br /> 
< input type= "radio" name= "sex" value= "radiobutton" jdF "female" /> 
< label for= "female"> 女 < /label> 
添加 带 有 for 属性 的 过 label 之 标记 后 ,你 会 发 现 单 击 标签 时 就 相当 于 单 击 了 表单 
控件 。 


2. 字段 集 标 记 一 fieldset> 一 legend 一 


去 fieldset 之 是 字段 集 标记 , 它 必 须 包 含 一 个 一 legend 盖 标记 ,表示 是 字段 集 的 标题 。 
如 果 表 单 中 的 控件 较 多 ,可 以 将 逻辑 上 是 一 组 的 控件 放 在 一 个 字段 集 内 ,这 样 显得 有 条 
理 些 。 


2.7.8 HTML 5 新 增 的 表单 标记 和 属性 


HTML 5 在 表单 方面 做 了 很 大 的 改进 ,包括 : 使 用 type 属性 增强 表单 ,表单 元 素 可 
以 出 现在 form 标记 之 外 ,input 元 素 新 增 了 很 多 可 用 属性 等 。 


1. input 标记 的 新 增 类 型 值 


在 HTML 5 中 ,一 input 盖 标记 在 原 有 类 型 (type 属性 值 ) 的 基础 上 ,新 增 了 许多 新 的 
类 型 成 员 , 如 表 2-11 所 示 。 
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表 2-11 二 input 标记 新 增 的 类 型 























类 型 名 称 type 属性 功能 描述 

网 址 输入 框 <input type= "url"> 用 来 输入 网 址 的 文本 框 

Email 输入 框 <input type= "email"> 用 来 输入 Email 地 址 的 文本 框 

数字 输入 框 一 input type= "number"> 输入 数字 的 文本 框 ,并 可 设置 输入 值 的 范围 
范围 滑动 条 一 input type= "range"> 可 拖 动 滑动 条 ,用 于 改变 一 定 范围 内 的 数字 
日 期 选择 框 <input type="date"> 可 选择 日 期 的 文本 框 

搜索 输入 框 <input type= "search"> 输入 搜索 关键 字 的 文本 框 





其 中 ,网 址 输入 框 与 Email 输入 框 虽 然 从 外 观 上 看 与 普通 文本 框 相 同 , 但 是 它 会 检测 
用 户 输入 的 文本 是 否 是 一 个 合法 的 网 址 或 Email 地 址 ,从 而 不 需要 再 使 用 JavaScript 脚 
本 来 验证 用 户 输入 内 容 的 有 效 性 。 

数字 输入 框 示例 代码 如 下 ,在 Google 浏览 器 中 的 外 观 如 图 2-47( 左 ) 所 示 。 

< input type= "number" min= "1960" max= "1990" step= "ln value= "1980" /> 

相对 于 普通 文本 框 , 数 字 文本 框 会 检验 输入 的 内 容 是 否 为 数字 ,并 且 可 以 设置 数字 的 
最 小 值 (min) .最 大 值 Cmax) 和 步 进 值 (step)。 当 单 击 数 字 输 入 框 右 侧 的 上 下 箭头 时 ,就 
会 递增 或 递减 当前 值 。 

范围 滑动 条 的 示例 代码 如 下 ,在 Chrome 浏览 器 中 的 外 观 如 图 2-47( 中 ) 所 示 。 

0< input type= "rangen min= "0" max= "20" value= "10" /> 20 

搜索 输入 框 专门 用 于 关键 字 查询 ,该 类 型 输入 框 和 普通 文本 框 在 功能 和 外 观 上 没有 
太 大 区 别 , 唯 一 的 区 别 是 : 当 用 户 在 输入 框 中 填写 内 容 时 ,输入 框 右 侧 将 会 出 现 "X” 按 
钮 , 单 击 该 按钮 ,就 会 清空 给 入 框 中 内 容 。 示 例 代码 如 下 ,运行 结果 如 图 2-47( 右 ) 所 示 。 


< input name= "keyword" type= "search" /> 
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图 2-47 数字 输入 框 ( 左 ) .范围 滑动 条 (中 ) 和 搜索 输入 框 ( 右 ) 的 效果 





日 期 选择 框 的 示例 代码 如 下 ,在 Google 浏览 器 中 的 外 观 如 图 2-48 所 示 。 





< input name= "birth" type= "date" value= "2013- 06- 10" /> 





2013- 栈 -10 x$v 
可 见 ,日 期 选择 框 能 够 弹出 日 期 界面 供用 户 选择 ， | 20134F11 有 ~ 四 四 加 
如 果 对 其 设置 value 属性 , 则 会 显示 该 属性 中 的 值 作为 星期 星期 星期 星期 星期 星期 星期 








默认 日 期 。type 属性 除了 date 外 ,将 type 属性 设置 为 二 S 和 . | 本 
time month ,week datetime datetime-local 均 表 示 日 期 2 13 14 15 16 

17 18 19 20 21 22 23 
选择 框 ,只 不 过 此 时 能 选择 时 间 、 月 份 、 星 期 等 值 。 24 25 26 27 28 29 1°30 





示 : 如 果 浏 览 器 不 这 些 HTML 5 中 的 
把 过 下 出 入 吉 汪 交往 太 pe 图 2-48 日 期 选择 框 
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属性 值 , 则 会 取 type 属性 的 默认 值 text, 从 而 将 input 元 素 解 释 为 文本 框 。 





2. input 标记 新 增 的 公共 属性 


在 HTML 5 中 ,input 标记 新 增 了 很 多 公共 属性 ,如 表 2-12 所 示 。 除 此 之 外 ,还 新 增 
了 一 些 特有 属性 ,如 range 类 型 中 的 min、max.、step 等 。 


表 2-12 input 标记 新 增 的 公共 属性 




















属 性 HTML 代码 功能 说 明 
autofocus 一 input autofocus= "true"> 设置 元 素 自动 获得 焦点 
pattern 一 input pattern 一 "正则 表达 式 "二 使 用 正则 表达 式 验证 input 元 素 的 内 容 
placeholder 二 input placeholder 二 "默认 内 容 " 二 设置 文本 输入 框 中 的 默认 内 容 
required 一 input required= "true"> 是 否 检测 文本 输入 框 中 的 内 容 为 空 
novalidate 一 input novalidate= "true"> 是 否 验 证 文本 输入 框 中 的 内 容 
autocomplete 一 input autocomplete="on"> 使 form 或 input 具有 自动 完成 功能 








(1) autofocus 属性 : 当 input 元 素 具有 autofocus 属性 时 ,会 使 页 面 加 载 完 成 后 ,该 
元 素 自 动 获得 焦点 ( 即 光 标 位 于 该 输入 框 内 ) 。 

(2) pattern 属性 : 对 于 比较 复杂 的 规则 验证 ,如 验证 用 户 名 “是 否 以 字母 开头 ,包含 
字符 或 数字 和 下 划 线 ,长度 在 6 一 8 个 字符 之 间 ”, 则 需要 使 用 pattern 属性 设置 正则 表达 
式 验证 ,例如 ,pattern 一 "^[a-zA-Z]\w(5,7)$"。 

(3) placeholder 属性 : 该 属性 可 在 文本 框 中 放置 一 些 提 示 文 本 (通常 以 灰色 显示 )， 
当 输 入 文本 时 ,提示 文本 消失 。 示 例 代码 如 下 ,其 效果 类 似 于 图 2-39 。 


< input name= "keyword" type= "search" placsholder= "请 输入 关键 字 " /> 


(4) required 属性 : 该 属性 用 来 验证 输入 框 的 内 容 是 否 为 空 , 如 果 为 空 ,那么 在 表单 
提交 时 ,会 显示 错误 提示 信息 。 

(5) novalidate 属性 : 该 属性 表示 提交 表单 时 不 验证 表单 或 输入 框 的 内 容 , 该 属性 适 
用 于 二 form 过 以 及 以 下 类 型 的 二 input 过 标记: text、 search、 url、 telephone、email、 
password date pickers ,range 以 及 color。 

(6) autocomplete 属性 : 该 属性 用 来 设置 表单 或 输入 框 是 否 具 有 自动 完成 功能 ,其 属 
性 值 是 on 或 off。 开 启 自 动 完成 功能 后 , 当 用 户 成 功 提交 一 次 表单 后 ,以 后 每 次 再 提交 表 
单 时 ,都 会 在 输入 框 下 方 出 现 以 前 输入 过 的 内 容 供用 户 选择 。 

这 些 属性 的 功能 过 去 一 般 都 是 用 JavaScript 脚本 实现 的 ,而 现在 用 HTML 5 属性 实 
现 后 ,可 以 大 大 减少 对 JavaScript 代码 的 使 用 。 


3. 新 增 的 表单 元 素 


在 HTML 5 中 , 除 新 增 了 input 标记 的 类 型 外 ,还 新 增 了 许多 新 的 表单 元 素 , 如 
datalist、keygen、output 等 。 这 些 元 素 的 加 入 , 极 大 地 丰富 了 表单 数据 的 操作 ,优化 了 用 
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户 体验 。 

1) datalist 元 素 

datalist 元 素 的 功能 是 辅助 表单 中 文本 框 的 数据 输入 。datalist 元 素 本 身 是 隐藏 的 ， 
它 需 要 与 文本 框 的 list 属性 绑 定 ,只 要 将 list 属性 值 设 置 为 
datalist 元 素 的 ID 属性 即 可 。 绑 定 成 功 后 ,用 户 在 文本 框 输入 I 
内 容 时 ,datalist 元 素 将 以 列表 的 形式 显示 在 文本 框 底部 ,提示 
输入 的 内 容 , 与 自动 完成 的 功能 类 似 。 示 例 代码 如 下 ,运行 效 
果 如 图 2-49 所 示 。 图 2-49 datalist 元 素 示例 

















< input type= "text" icF "zhiye" list= "career" /> 
<datalist id= "career"> 
<cption value= "TT 人 ">< /option> 
<cption value= "医生 咱 < /option> 
<cption value= "公务 员 ">< /option> 
</datalist> 
2) outpnut 元 素 
output 元 素 的 功能 是 在 页 面 中 显示 各 种 不 同类 型 表单 元 素 的 内 容 或 运算 后 的 结果 ， 
如 输入 框 的 值 。output 元 素 需要 配合 onFormInput 事件 使 用 ,在 表单 输入 框 中 输入 内 容 
时 ,将 触发 该 事件 ,从 而 可 方便 地 获取 到 表单 中 各 个 元 素 的 输入 内 容 。 下 面 是 一 个 例子 ， 
当 改变 表单 中 两 个 文本 框 的 值 时 ,output 元 素 的 值 也 随 之 改变 。 效 果 如 图 2-50 所 示 。 


< fom oninput= "x.value= parseInt (a.value)+ParseInt (bp.value)"> 
0< input type= "range" id= "an value= "50"> 100 
+< input type= "nunber" id= "b" value= "50"> 
=< output name= "x" for= "a b"> < /output> 
</form> 
3) keygen 元 素 
keygen 元 素 用 于 生成 页 面 的 密 钥 。 如 果 在 表单 中 添加 该 元 素 , 那 么 当 表单 提交 时 ， 
该 元 素 将 生成 一 对 密 钥 : 一 个 称 为 私 钥 ,将 保存 在 客户 端 ; 另 一 个 称 为 公 钥 , 将 发 送 给 服 
务 器 ,由 服务 器 进行 保存 , 公 钥 可 用 于 客户 端 证 书 的 验证 。 
在 表单 中 ,插入 一 个 name 值 为 userinfor 的 二 keygen 过 元素 ,代码 如 下 ， 


< keygen name= "userinfor" keytype= "rsa" /> 


则 会 在 页 面 中 显示 一 个 如 图 2-51 所 示 的 选择 密 钥 位 数 的 下 拉 列 表 框 ,当选 择 列表 框 中 的 
密 钥 长 度 值 后 ,提交 表单 ,将 根据 所 选择 的 密 钥 位 数 生成 一 对 公私 钥 , 并 将 公 钥 发 送 给 服 
务 器 。 





1024 (中 等 强度 ) 


0 上 100 #50 | -89 1024 (中 等 强度 ) 














图 2-50 ”output 元素 示例 图 2-51 keygen 元 素 示例 
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目前 ,只 有 Chrome、Firefox 和 Opera 浏览 器 支持 该 元 素 , 因 此 ,如 果 将 keygen 作为 
客户 端 安全 保护 的 一 种 有 效 措施 ,还 需要 时 间 。 


2.8 框架 标记 ” 


框架 的 作用 是 把 浏览 器 的 显示 空间 分 割 为 几 部 分 ,每 个 部 分 可 独立 显示 不 同 的 网 页 。 
框架 标记 包括 框架 集 二 frameset 二 标记 和 框架 二 frame /请 标记 ,它们 是 成 组 出 现 的 。 

在 互联 网 诞生 初期 ,框架 常用 于 网 页 排版 ,但 现在 用 得 很 少 了 ,一 般 只 在 网 站 后 台 管 
理 程序 中 使 用 。 通 过 一 个 框架 集 网 页 可 使 多 个 网 页 显示 在 一 个 浏览 器 窗口 中 。 


2.8.1 志 frameset 之 标记 


窗口 框架 的 分 割 有 两 种 方式 : 一 种 是 水 平分 割 ; 另 一 种 是 垂直 分 割 , 在 二 frameset 二 
标记 中 通过 cols 属性 和 rows 属性 来 控制 窗口 的 分 割 方式 。 框 架 标 记 的 形式 如 下 : 

< frameset cols[ 或 rowsl= " 咯 框 架 的 大 小 或 比例 " order= "像素 值 " bordercolor= ' 闫 色 值 " framsborder 

= "Yeslno" framespacing= "像素 值 ">…< /frameset> 

如 果 要 去 掉 框架 的 边框 ,可 设置 frameborder 二 "no",framespacing 指 框架 和 框架 之 
间 的 距离 ,bordercolor 属性 IE 浏览 器 不 支持 。 





1. 用 eols 或 rows 属性 将 分 割 窗口 


cols 属性 可 以 将 一 个 框架 集 分 割 为 左右 若干 列 , 每 列 就 是 一 个 框架 ,rows 属性 用 来 
将 窗口 分 割 成 若干 行 个 窗口 。 例 如 


< frameset cols= "nln2…， 关 > 
< frameset rows="30% ,40% ,x* "> 


“nl,n2,…” 表 示 每 个 子 窗口 的 宽度 ,单位 可 以 是 像素 或 百分比 。 星 号 “ * ”表示 分 配 
给 前 面 所 有 的 窗口 后 剩余 的 宽度 。 在 一 个 二 frameset 二 标记 中 ,不 能 同时 设置 cols 属性 
和 rows 属性 ,否则 rows 属性 将 失效 。 


2. 框架 的 菊 套 


通过 框架 的 嵌 套 可 实现 对 子 窗口 的 分 割 , 例 如 有 时 需要 先 将 窗口 水 平分 割 ,再 将 某 个 
子 窗口 进行 垂直 分 割 , 如 图 2-52 所 示 ,可 用 下 面 的 代码 实现 。 


<htm> 
<head><title> 用 框架 分 割 窗 体 < /title> < /head> 
< frameset rows="30% ,* "> 
< frame src= "2- 8.html"/> 
< frameset cols= "308 ,* "> 
< frame src= "2- 9.html"/> < frame src= "2- 2hn.html"/> 
< /frameset> 


< /frameset> 
</htm> 
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需要 注意 的 是 ,一 frameset 盖 标记 和 二 body 过 标记 是 同 级 的 ,因此 ,不 要 将 二 frameset 二 
标记 写 在 二 body 志 标记 中 ,否则 过 frameset 标 记 将 无 法 正常 工作 。 


2.8.2 二 frame/ 过 标记 
二 frame/ 记 标记 是 一 个 单 标记 , 它 的 格式 和 常用 属性 如 下 : 


< frame src= "url" name=" 框 架 名 " border=" 像 素 值 " bordercolor=" 颜 色 值 " framsborder= "yes| no" 
marginwidth= "像素 值 " marginheight= "像素 值 " scrolling= "yes|nolauto" noresize= "noresize" /> 


其 中 scrolling 指定 框架 窗口 是 否 允 许 出 现 滚动 条 ,noresize 指定 是 否 允 许 调 整 框架 
的 大 小 。 


1. 用 src 属性 指定 要 显示 的 网 页 


框架 的 作用 是 显示 网 页 ,这 是 通过 src 属性 来 进行 设置 的 。 这 个 src 属性 和 到 img /二 
中 的 src 属性 作用 相似 ,都 接 文件 的 URL。 例 如 : 


< frame src= "demo/2- 8.html"/> 





2. 用 name 属性 指定 框架 的 名 称 


可 以 用 name 属性 为 框架 指定 名 称 , 这 样 做 的 用 途 是 : 当 其 他 框架 中 的 链接 要 在 指定 
的 框架 中 打开 时 ,可 以 设置 其 他 框架 中 超 链接 的 target 属性 值 等 于 这 个 框架 的 name 值 。 
例如 ,在 图 2-52 中 ,左边 窗口 中 的 链接 都 要 求 在 右边 窗口 打开 。 那 么 可 设置 右边 窗口 的 
name 值 为 main, 而 左边 窗口 中 所 有 链接 的 target 属性 值 为 main。 

例如 ,定义 右边 窗口 name 属性 为 main: 


< frame name= "main"/> 
左边 窗口 中 的 链接 目标 是 main: 


<a href- "add.htm' target "main"> 添 加 新 闻 < /a> 
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这 样 add. htm 会 在 框架 名 为 main 的 窗口 (右边 窗口 ) 中 打开 。 


2.8.3 ” 骨 入 式 框架 标记 二 iframe 二 


框架 标记 只 能 对 网 页 进行 左右 或 上 下 分 割 ,如 果 要 让 网 页 的 中 间 某 个 矩形 区 域 显 示 
其 他 网 页 , 则 需要 用 到 嵌入 式 框架 标记 ,通过 一 iframe 之 可 以 很 方便 地 在 一 个 网 页 中 显示 
另 一 个 网 页 的 内 容 , 如 图 2-53 网 页 中 的 天 气 预报 就 是 通过 iframe 调用 了 男 一 个 网 页 的 
内 容 。 

下 面 是 租 入 式 框架 的 属性 举例 : 


< iframe src="url" width="x" height="x" scrolling=" [option]" frameborder="x" name= "main"> </ 





iframe> | 通过: fr one 调 用 天 气 观 所 全 计 庙 |[e]E3| 

一 iframe> 标 记 中 各 个 属性 的 含义 如 下 ， see 

(1) src 一 一 文件 的 URL 路 径 。 on 

(2) width height iframe 框架 的 宽 和 高 。 

(3) scrolling 一 一 当 src 指定 的 网 页 在 区 域 中 显示 不 完 
时 ,是 否 出 现 滚动 条 选项 ,如 果 设置 为 no, 则 不 出 现 滚 动 
条 ;如 果 为 auto, 则 自动 出 现 滚动 条 ;如 果 为 yes, 则 显示 。 

(4) frameborder 一 一 iframe 边框 的 宽度 ,为 了 让 框架 
与 邻近 内 容 相 融合 ,常设 置 为 0。 

(5) name 一 一 框架 的 名 字 ,用 来 进行 识别 。 例 如 : 

< iframe src= "http://www.baida.com" width= "250" height= "200" scrolling= "auto" frameborder= "0" name 

= "main"> < /iframe> 

艇 人 式 框架 常用 于 将 其 他 网 页 的 内 容 导 入 到 自己 网 页 的 某 个 区 域 , 如 把 天 气 预 报 网 
站 的 天 气 导 入 到 自己 做 的 网 页 的 某 个 区 域 显示 。 但 某 些 木 马 或 病毒 程序 利用 iframe 的 
这 一 特点 ,通过 修改 网 站 的 网 页 源 代码 ,在 网 页 尾部 添加 iframe 代码 ,导入 其 他 带 病 毒 的 
恶意 网 站 的 网 页 ,并 将 iframe 框架 的 宽 和 高 都 设置 为 0. 使 iframe 框架 看 不 到 。 这 样 用 户 
打开 某 网 站 网 页 的 同时 ,就 不 知 不 觉 打 开 了 恶意 网 站 的 网 页 ,从 而 感染 病毒 ,这 就 是 所 谓 
的 iframe 挂 木马 的 原理 。 不 过 可 留意 浏览 器 的 状态 栏 看 打开 网 页 时 是 否 提示 正在 打开 
某 个 可 疑 网 站 的 网 址 而 发 现 网 页 被 挂 木马 。 

提示 : 在 HTML 5 中 已 经 不 支持 frame 框架 ,但 支持 iframe 框架 。 


2.9 ” 头 部 标记 ” 


如 前 所 述 , 网 页 由 head 和 body 两 个 部 分 构成 ,在 网 页 的 head 部 分 ,除了 title 标记 
外 ,还 有 其 他 的 几 个 标记 ,这 些 标记 虽然 不 常用 ,但 是 需要 有 一 定 的 了 解 。 
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1. 二 meta 二 标记 


meta 是 元 信息 的 意思 , 即 描述 信息 的 信息 。 二 meta 二 标记 提供 网 页 文档 的 描述 信息 
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等 。 如 描述 文档 的 编码 方式 ,文档 的 摘要 或 关键 字 、 文 档 的 刷新 ,这 些 都 不 会 显示 在 网 
天 上 正 s 

二 meta 之 标记 可 分 为 两 类 ,如 果 它 具有 name 属性 , 则 表示 它 的 作用 是 提供 页 面 描述 
信息 ;如 果 它 具有 http-equiv 属性 ,那么 其 作用 就 变 成 回应 给 浏览 器 一 些 有 用 的 信息 ,以 
帮助 正确 和 精确 地 显示 网 页 内 容 。 下 面 是 几 个 例子 。 

(1) 描述 文档 的 编码 方式 ,这 可 以 防止 浏览 器 显示 乱码 ,例如 “gb2312” 表 示 简 体 中 
文 。 对 于 XHTML 网 页 来 说 ,这 一 项 是 必需 的 。 在 Dreamweaver 中 新 建 XHTML 网 页 
时 ,都 自动 会 在 网 页 头 部 有 如 下 代码 : 


< meta http- equiv= "Content- Type" content= "text/html; harset= go2312" /> 


(2) 描述 摘要 或 关键 字 , 网 页 的 摘要 ,关键 字 是 为 了 让 搜索 引擎 能 对 网 页 内 容 的 主题 
进行 识别 和 分 类 。 例 如 : 


<meta name= "Keywords" content= "网 页 设计 ,学 习 " />< 上 -设置 关键 字 --> 
<meta name= "Description" content= "学习 网 页 设计 的 网 站 " /> < 上 -设置 摘要 --> 


(3) 设置 文档 刷新 。 文 档 刷 新 可 设置 网 页 经 过 几 秒 钟 后 自动 刷新 或 转 到 其 他 URL。 
例如 : 


<meta http- equiv= "refresh" content= "30"> <!-- 过 30 秒 后 自动 刷新 --> 
<meta http- equiv= "refresh" content= "5;? Url= index.htm">< !- -5 秒 后 自动 转 到 ingex.htm --> 


2. 二 link 二 、 二 style 之 和 一 script 一 标记 


去 link 之 标记 用 来 链接 外 部 CSS 文件 , 志 style 之 标记 用 来 在 网 页 头 部 蔡 入 CSS 代 
码 ,而 二 script 二 标记 用 来 链接 或 矢 入 JavaScript 代码 。 例 如 : 


< link href= "css/style.css" rel= "stylesheet" type= "text/css" /> < !-- 链 接 一 个 css 文 件 --> 
< style type= "text/css"> hlffont- size:12px; }< /style> < ! 一 岩 入 css 代 码 --> 
< script src= "js/jquery.js"> < /script> < 上 -链接 一 个 外 部 js 文件 --> 
< script> function msg() {alert ("Hello") }< /script> < ! 一 嵌入 uavascript 代 码 --> 


习 题 2 


1. HTML 中 最 大 的 标题 元 素 是 ( Ws 


A. =head> B. <title> CG; <hl> D. =hé> 
2. 下 列 哪 种 元 素 不 能 够 相互 艇 套 使 用 ? ( ) 

A. 表格 B. 表单 form C. 列表 D. div 
3. 下 述 元 素 中 ( ) 都 是 表格 中 的 元 素 。 

A. =table><=head><th> B. =table><tr><td> 

C. <table><=body>><tr> D. =table>=head><footer> 


4. <title 之 标记 中 应 该 放 在 ( ) 标 记 中 。 
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A. =head> B. =table> C. =body> D. <div> 
5. 下 述 ( ”) 表 示 表 图 像 元 素 。 

A. <img>image. gi{</img> B. 所 img href="image. gif " /> 

C. <img src 一 "image. gif " /> D. <image src 一 "image. gif " /> 
6. 要 在 新 窗口 打开 一 个 链接 指向 的 网 页 需 用 到 ( Ws 

A. href="_blank " B. name="_blank " 

C. target="_blank " D. href="#blank " 
7. align 属性 的 可 取 值 不 包括 以 下 哪 一 项 ? ( ) 

A. left B. center C. middle D. right 
8. 下 述 哪 一 项 表示 表单 控件 元 素 中 的 下 拉 框 元 素 ? ( ) 

A. =select> B. 所 input type= "list"> 

C. <list> D. 所 input type= "options"> 
9. 在 下 列 的 HTML 中 ,哪个 可 以 产生 复 选 框 ? (。 ) 

A. =input type= "check"> B. =checkbox> 

C. 所 input type= "checkbox"> D. =check> 


10. 下 列 哪 项 表述 是 不 正确 的 ?( ) 
A. 单行 文本 框 和 多 行文 本 框 都 是 用 相同 的 HTML 标记 创建 的 
B. 列表 框 和 下 拉 列 表 框 都 是 用 相同 的 HTML 标记 创建 的 
C. 单行 文本 框 和 密码 框 都 是 用 相同 的 HTML 标记 创建 的 
D. 使 用 图 像 按 钮 二 input type="image" 之 也 能 提交 表单 





11. colspan 是 标记 的 属性 ,cellpadding 是 标记 的 属性 ，target 是 
标记 或 标记 的 属性 ,二 input 二 标记 至 少 会 具有 ”属性 ,二 img> 
标记 必须 具有 属性 ,如 果 作 为 超 链接 ,二 a 二 标记 必须 具有 属性 。 
12 对 象 表示 浏览 器 的 URL 地 址 ,并 可 用 于 将 浏览 器 转 到 某 个 网 址 。 


13. 下 面 的 表单 元 素 代 码 都 有 错误 ,你 能 指出 它们 分 别 错 在 哪里 吗 ? 
© <input name= "country" value="Your country here." /> 
@) =checkbox name= "color" value= "teal" /> 
©®@ <input type="password" value="pwd" /> 
@ =textarea name =" essay" height ="6" width 一 "100" 二 Your story. 
</textarea> 
© =select name="popsicle"> 
option value= "orange" />=option value="grape" /> 二 option value= 
"cherry" /> 
</select> 
14. 画 出 下 面 HTML 代码 对 应 的 表格 : 
< table width= "466" height= "127"> 
<tr><td < /td><ta rowspar= "2> < /to>< /tr> 
<tr><to</to< /tr>< /table> 


15. 仿照 图 2-36, 设 计 一 个 用 户 注 册 的 表单 页 面 。 


XHTML 与 Web 标 准 Q) 


XHTML 是 可 扩展 超 文 本 标记 语言 (eXtensible HyperText Markup Language) 的 缩 
写 ,2000 年 底 , W3C 正式 发 布 了 XHTML 1.0 版 本 。XHTML 1.0 是 一 种 在 HTML 
4.01 基础 上 做 了 少量 优化 和 改进 的 新 语言 ,是 一 种 增强 了 的 HTML, 是 更 严谨 、 更 纯净 
的 HTML 版 本 。 它 是 在 HTML 4.0 的 基础 上 ,为 了 适应 XML 而 重新 改造 的 HTML， 
其 特点 是 结合 了 部 分 XML 的 强大 功能 及 大 多 数 HTML 的 简单 特性 。 


3.1 XHTML 与 HTML 的 区 别 


从 HTML 到 XHTML 的 过 渡 变 化 比较 小 ,主要 是 为 了 适应 XML。 其 最 大 的 变化 在 
于 文档 必须 是 结构 优良 的 , 即 所 有 标记 必须 闭合 ,也 就 是 说 ,开始 标记 都 要 有 相应 的 结束 
标记 。 另 外 ,XHTML 中 所 有 的 标记 必须 小 写 。 


3.1.1 文档 类 型 的 含义 和 选择 


由 于 网 页 源 文件 存在 不 同 的 规范 和 版 本 ,为 了 使 浏览 器 能 够 兼容 多 种 规范 ,在 
XHTML 文档 中 ,必须 使 用 文档 类 型 指令 (DOCTYPE) 来 声明 使 用 何 种 规范 解释 该 文档 。 

目前 ,常用 HTML 或 XHTML 作为 文档 类 型 。 而 规范 又 规定 ,在 HTML 和 
XHTML 中 各 自 有 不 同 的 子 类 型 ,如 严格 类 型 (Strict) 或 过 渡 类 型 (Transitional) 。 其 中 ， 
过 滤 类 型 兼容 以 前 版 本 定义 的 ,但 在 新 版 本 中 已 经 废弃 的 标记 和 属性 ;而 严格 类 型 则 不 兼 
容 已 经 废弃 的 标记 和 属性 。 

建议 读者 使 用 Dreamweaver 默认 的 XHTML 1.0 Transitional(XHTML 1.0 过 渡 
类 型 ) 作 为 网 页 的 文档 类 型 ,这样 既 可 以 按照 XHTML 标准 书写 符合 Web 标准 的 网 页 代 
码 , 同 时 在 一 些 特殊 情况 下 还 可 以 使 用 传统 的 做 法 。 

在 Dreamweaver 中 使 用 默认 方式 新 建 的 网 页 文档 在 代码 中 的 第 一 行 都 会 有 如 下 
代码 : 

< !DOCTYPE html PUBLIC ™— //W3C//DID XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DID/xhtml1 

-transitional .dbd"> 

这 就 是 关于 “文档 类 型 ”的 声明 , 它 告 诉 浏览 器 使 用 XHTML 1. 0 过 渡 规 范 来 解释 这 
个 文档 中 的 代码 。 其 中 DTD 是 文档 类 型 定义 (Document Type Definition) 的 英文 首 字母 
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缩写 。 


对 XHTML 文档 类 型 的 声明 ,有 Transitional、 Strict 和 Frameset 三 种 子 类 型 ， 
Transitional 是 过 渡 类 型 的 XHTML ,表明 兼容 原来 的 HTML 标记 和 属性 ;Strict 是 严格 
型 的 应 用 方式 ,在 这 种 形式 下 ,不 能 使 用 HTML 中 任何 样式 表现 的 标记 (如 过 font 之 ) 和 
属性 (如 bgcolor) ;Frameset 则 是 针对 框架 网 页 的 应 用 方式 ,使 用 了 框架 的 网 页 应 使 用 这 
种 类 型 。 

注意 : 

(1) 文档 类 型 声明 必须 写 在 HTML 代码 的 第 一 行 , 且 前 面 不 能 有 任何 空格 ,否则 文 
档 类 型 声明 将 失效 

(2) DOCTYPE 是 用 于 定义 文档 类 型 的 指令 ,但 并 不 是 一 个 标记 ,因此 不 需要 封闭 。 


3.1.2 XHTML 与 HTML 的 重要 区 别 


尽管 目前 浏览 器 都 兼容 HTML ,但 是 为 了 使 网 页 能 够 符合 标准 ,读者 应 该 尽量 使 用 
XHTML 规范 来 编写 代码 ,XHTML 的 代码 和 HTML 的 代码 有 如 下 几 个 重要 区 别 。 


1. XHTML 文档 必须 在 文档 的 第 一 行书 写 文 档 类 型 声明 (DOCTYPE) 
HTML 文档 可 以 不 写 文档 类 型 声明 ,但 XHTML 一定 要 有 文档 类 型 声明 。 
2. XHTML 文档 可 以 定义 命名 空间 

在 XHTML 文档 中 ,二 html 二 标记 通常 带 有 xmlns 属性 ,例如 : 


<html xmlns= "http://www.w3.0rg/1999/xhtml"> 


xmlns 称 为 XML 命名 空间 (XML NameSpace) ,由 于 XML 可 以 自 定义 标记 , 它 需 要 
用 命名 空间 来 唯一 标识 XML 文档 中 的 元 素 和 实体 的 含义 ,通过 特定 URL 关联 命名 空间 
文档 ,解决 命名 冲突 ,而 XHTML 是 一 种 特殊 的 XML, 通 过 将 xmlns 修改 为 自 定义 命名 
空间 文档 的 URL ,就 可 以 自 定义 XHTML 文档 中 的 标记 。 例 如 , 自 定义 一 个 二 author 二 
标记 。 但 在 一 般 情 况 下 没 必 要 修改 命名 空间 ,而 且 xmlns 属性 还 可 省 略 ,这 时 将 使 用 浏 
览 器 默认 的 命名 空间 。 


3. XHTML 文档 里 必须 具有 html、head 、body.title 这 些 基本 元 素 


对 于 HTML 文档 ,即使 代码 里 没有 html、head、body.title 这 些 基 本 元 素 , 仍 然 是 正 
确 的 ,但 XHTML 要 求 一 定 要 有 这 些 基本 元 素 ,和 否则 就 不 正确 。 


4. 在 XHTML 语言 规范 的 基础 上 ,对 标记 的 书写 有 一 些 额 外 的 要 求 


1) 标记 名 必须 小 写 
HTML 中 标记 名 既 可 大 写 又 可 小 写 , 如 过 BODY 之 过 P> 这 是 一 个 段落 志 /P> 
二 /BODY ,但 在 XHTML 中 则 必须 写成 : 


<body>< 户 这 是 一 个 段落 < /p>< /body> 
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2) 属性 名 必须 小 写 

例如 ,二 img src 一 "banner. jpg" width 一 "760" height 一 "140" /这 。 

3) 具有 枚 举 类 型 的 属性 值 必须 小 写 

XHTML 并 没有 要 求 所 有 的 属性 值 都 必须 小 写 , 自 定义 的 属性 值 可 以 大 写 ,例如 类 
名 或 id 名 的 属性 值 可 以 使 用 大 写字 母 ,但 枚 举 类 型 的 属性 值 则 必须 要 小 写 , 枚 举 类 型 的 
值 是 指 来 自 允 许 值 列表 中 的 值 ;例如 ,align 属性 具有 以 下 人 允许 值 : center left 和 right。 
因此 ,下 面 的 写法 是 符号 XHTML 标准 的 : 


<div align= "center" id= "PageFooter™>***< /div> 


4) 属性 值 必须 用 双 引 号 括 起 来 

HTML 中 ,属性 可 以 不 必 使 用 引号 ,例如 ,二 img src 一 banner. jpg width 一 760 height 一 
140 ,而 在 XHTML 中 ,必须 严格 写成 : 

< img src= "banner.jpg" width= "760" height= "140" /> 

5) 所 有 标记 包括 单 标 记 都 必须 封闭 

(1) 这 是 指 双 标记 必须 要 有 结束 标记 ,例如 ,二 p 二 这 是 一 个 段落 二 /p 二 。 

(2) 单 标记 也 一 定 要 用 斜 杠 “/” 封 闭 , 例 如 ,二 br /全 、 一 hr /人 >、 一 img src== banner. 
jpg /过 等。 

6) 属性 值 必须 使 用 完整 形式 

在 HTML 中 ,有 些 表单 中 元 素 的 属性 由 于 只 有 一 个 可 选 的 属性 值 ,通常 就 把 这 个 属 
性 值 省 略 掉 了 ,例如 ,二 input checked 二 。 

而 在 XHTML 中 ,属性 值 在 任何 情况 下 都 不 能 省 略 , 例 如 


< input checked= "checked" /> 





3.2 ”Web 标准 


HTML 语言 最 开始 是 用 来 描述 文档 的 结构 的 ,如 标题 .段落 等 标记 ,后 来 因为 人 们 还 
想 用 它 控制 文档 的 外 观 , HTML 便 又 增加 了 一 些 控制 字体 对齐 等 方面 的 标记 和 属性 ,这 
样 做 的 结果 是 HTML 既 可 用 来 描述 文档 的 结构 ,又 能 表示 文档 的 外 观 ,但 是 HTML 描 
述 文档 表现 的 能 力 很 弱 , 还 造成 了 结构 和 表现 混杂 在 一 起 ,如 果 页 面 要 改变 外 观 , 就 必须 
重新 编写 HTML ,代码 重用 性 低 。 


3.2.1 传统 HTML 的 缺点 


在 CSS 还 没有 被 引入 网 页 设计 之 前 ,传统 的 HTML 语言 要 实现 网 页 元 素 外 观 设计 
是 十 分 麻烦 的 。 例 如 ,要 在 一 个 网 页 中 把 所 有 二 h2 二 标记 中 的 文字 ,设置 为 蓝 色 、 黑 体 字 
显示 。 则 需要 在 每 一 个 h2 标记 中 添加 过 font 之 标记 ,代码 如 下 : 





<h2> < font color= 哗 0000FFE" face= 器 体 吃 h2 标 记 1< /font> < /hb2> 
<E>Css 标 记 的 正文 内 容 < /> 
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<h2> < font color= 哗 0000FF" facs= 器 体 吃 h2 标 记 2< /font>< /h2> 
<p>css 标 记 的 正文 内 容 2< /p> 
<h2> < font color= 哗 0000FE" facs= 器 体 吃 h2 标 记 x /font>< /h2> 
<p>Css 标 记 的 正文 内 容 x /> 
<h2> < font color= 哗 0000FF" face= 器 体 吃 h2 标 记 4 /font> < /h2> 
<p>Css 标 记 的 正文 内 容 4 /E> 
假设 ,网 页 中 有 100 个 h2 标记 , 则 需要 重复 添加 100 个 font 标记 并 设置 属性 ,如 果 
以 后 要 将 这 100 个 标记 的 颜色 修改 为 红色 , 则 需要 一 个 个 地 改 , 非 常 麻 烦 。 
而 使 用 CSS 后 ,情况 则 完全 不 同 ,使 用 CSS 实现 上 述 功能 的 代码 如 下 ; 
<html><head> 
< style> 
h2{ /* 选中 所 有 h2 标 记 x* / 
font- family:" 黑 体 清 
color:bluey /* 设置 字体 颜色 <* / 
} 
</style> 
< /heac> 
<body> 
<h2>h2 标 记 1< /h2><g>css 标 记 的 正文 内 容 1< /> 
<h2>h2 标 记 2< /h2><p>css 标 记 的 正文 内 容 2< /p> 
<h2> m2 标记 x /h2><g>css 标 记 的 正文 内 容 x /> 
<h2>h2 标 记 4 /h2><g>css 标 记 的 正文 内 容 4< /> 
< /body> < /htm> 
这 样 ,只 要 修改 上 述 CSS 代码 中 的 字体 颜色 属性 值 blue, 就 可 以 改变 页 面 中 所 有 h2 
标记 的 颜色 。 并 且 ,CSS 还 能 统一 设置 网 站 中 所 有 页 面 字 体 的 风格 。 


3.2.2 ”Web 标准 的 含义 


为 了 让 网 页 的 结构 和 表现 能 够 分 离 ,W3C 提出 了 Web 标准 , 即 网 页 由 结构 .表现 和 
行为 组 成 。 用 HTML 的 新 版 本 XHTML 描述 文档 的 结构 ,用 CSS 控制 文档 的 表现 , 因 
此 XHTML 和 CSS 就 是 内 容 和 形式 的 关系 ,由 XHTML 确定 网 页 的 内 容 , 而 通过 CSS 来 
决定 页 面 的 表现 形式 。 

Web 标准 是 指 网 页 由 结构 (Structure) 表现 (Presentation) 和 行为 (Behavior) 组 成 ， 
为 了 理解 Web 标准 ,就 需要 明确 下 面 几 个 概念 。 

(1) 内 容 : 内 容 就 是 页 面 实 际 要 传达 的 真正 信息 ,包含 文本 或 者 图 片 等 。 注 意 这 里 
强调 的 “真正 ”, 是 指 纯粹 的 数据 信息 本 身 。 例 如 : 

天 仙子 由 宋 . 张 先 沙 上 并 禽 池上 莉 , 云 破 月 来 花 弄 影 。 重 重 帘 幕 密 遮 灯 , 风 不 定 , 人 初 静 , 明 日 落 红 

应 满 径 。 作 者 介绍 张 先 (990 一 1078) 字 子 野 , 乌 程 ( 今 浙江 湖州 ) 人 。 天 圣 八 年 (1030) 进 士 。 官 至 尚书 

都 官 郎中 。 与 柳 永 齐名 ,号 称号 三 影 "。 

(2) 结构 : 可 以 看 到 上 面 的 文本 信息 本 身 已 经 完整 。 但 是 混乱 一 团 ,难以 阅读 和 理 
解 ,我 们 必须 给 它 格式 化 一 下 。 把 它 分 成 标题 ,作者 、 章 、 节 、 段 落 和 列表 等 。 例 如 : 
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标题 天 仙子 由 





作者 宋 . 张 先 

正文 

沙 上 并 禽 池 上 芽 , 云 破 月 来 花 弄 影 
重重 帘 幕 密 遮 灯 , 风 不 定 , 人 初 静 ， 
明日 落 红 应 满 径 。 

节 工作 者 介绍 


张 先 (990 一 1078) 字 子 野 , 乌 程 ( 今 浙江 湖州 ) 人 。 天 圣 八 年 (1030) 进 士 。 官 至 尚书 都 官 郎中 。 与 柳 永 

齐名 /号称 " 张 三 影 " 

(3) 表现 : 上 面 的 文档 虽然 定义 了 结构 ,但 是 内 容 还 是 原来 的 样式 没有 改变 ,例如 标 
题字 体 没有 变 大 ,正文 的 颜色 也 没有 变化 ,没有 背景 .没有 修饰 。 所 有 这 些 用 来 改变 内 容 
外 观 的 东西 ,我 们 称 之 为 “表现”。 下 面 对 它 增加 这 些 修饰 内 容 外 观 的 东西 ,修饰 后 的 效果 
如 图 3-1 所 示 。 


天 仙子 (1) 
宋 . 张 先 
沙 上 并 售 池 上 眼 ， 云 破 月 来 花 弄 影 . 
重重 窗 藻 密 遮 灯 ， 风 不 定 ， 人 初 邦 ， 
明日 落 红 应 满 径 - 


作者 介绍 


张 先 ( 990 一 1078 ) 字 子 野 ， 乌 程 ( 今 ) 人 ， 天 圣 八 年 ( 1030 ) 进士 。 
官 至 尚书 都 官 郎 中。 与 柳 永 齐名 ,号称 “ 张 三 





图 3-1 文档 添加 了 “表现 ”后 的 效果 


很 明显 ,可 以 看 到 我 们 对 文档 加 了 两 种 背景 ,将 标题 字体 变 大 并 居中 ,将 小 标题 加 粗 
并 变 成 红色 ,等 等 。 所 有 这 些 ,都 是 “表现 "的 作用 。 它 使 内 容 看 上 去 漂亮 ,可爱 多 了 ! 形 象 
一 点 的 比喻 : 内 容 是 模特 ,结构 标明 头 和 四 肢 等 各 个 部 位 ,表现 则 是 服装 ,将 模特 打扮 得 
漂 漂 亮 亮 。 

(4) 行为 : 就 是 对 内 容 的 交互 及 操作 效果 。 例 如 ,使 用 JavaScript 可 以 响应 鼠标 的 单 
击 和 移动 ,可 以 判断 一 些 表单 提交 ,使 我 们 的 操作 能 够 和 网 页 进行 交互 。 

所 以 说 ,网 页 就 是 由 这 四 层 信息 构成 的 一 个 共同 体 , 这 四 层 的 作用 如 图 3-2 所 示 。 


f 










行为 层 
1 
I 





表现 层 


二 





结构 层 





图 3-2 网 页 的 组 成 
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在 Web 标准 中 ,结构 标准 语言 是 指 XML 和 XHTML, 表 现 标 准 语言 是 指 CSS 
(Cascading Style Sheets, 层 到 样式 表 ) ,行为 标准 语言 主要 指 JavaScript。 但 是 实际 上 
XHTML 语言 也 有 很 弱 的 描述 表现 的 能 力 , 而 CSS 也 有 一 定 的 响应 行为 的 能 力 ( 如 hover 
伪 类 ) ,而 JavaScript 是 专门 为 网 页 添加 行为 的 。 所 以 这 三 种 语言 对 应 的 功能 总 体 来 说 如 
图 3-3 所 示 ,并 且 这 三 种 语言 是 相互 关联 密切 配合 的 ,它们 的 关系 如 图 3-4 所 示 。 









XHTML 


JavaScript 


IAA 


图 3-3 网 页 的 组 成 项 及 实现 它们 的 语言 









图 3-4 三 种 语言 的 相互 联系 


3.2.3 Web 标准 的 优势 


Web 标准 的 核心 思想 就 是 “结构 "和 “表现 " 相 分 离 , 让 HTML 和 CSS 各 司 其 职 , 这 样 
做 的 好 处 有 以 下 几 点 : 

(1) 由 于 使 用 CSS 代码 统一 设置 元 素 样式 ,可 以 大 量 减少 HTML 代码 的 使 用 ,从 而 
减 小 网 页 文件 的 体积 ,使 页 面 载 人 .显示 速度 更 快 , 并 降低 网 站 流量 费用 ; 

(2) 使 用 CSS 统一 设置 大 量 HTML 元 素 的 样式 后 ,修改 网 页 时 更 有 效率 而 且 代价 
更 低 ; 

(3) 在 Web 标准 中 推荐 使 用 有 语义 的 HTML 元 素 定义 内 容 , 如 使 用 hl 标记 定义 标 
题 , 这 样 搜索 引擎 就 能 更 好 地 理解 网 页 中 的 内 容 , 对 搜索 引擎 更 加 友好 ,有 利于 搜索 引擎 
优化 (Search Engine Optimization ,SEO) ,从 而 提高 网 站 在 搜索 引擎 中 的 排名 ; 

(4) 使 网 站 对 浏览 器 更 具 亲 和 力 ,遵循 Web 标准 设计 的 网 页 由 于 具有 良好 的 文档 结 
构 ,使 不 能 有 效 解 析 HTML 文档 的 盲人 设备 或 手持 设备 也 能 理解 网 页 代码 内 容 。 

大 体 来 看 ,Web 标准 是 从 2004 年 开始 在 我 国 逐 渐 风 靡 起 来 的 ,在 这 之 前 由 于 IE 5.5 
以 下 版 本 浏览 器 对 CSS 的 支持 很 不 好 ,人 们 只 能 更 多 地 使 用 HTML, 想 尽 办 法 使 HTML 
同时 承担 着 “结构 "和 “表现 ”的 双重 任务 。 直 到 Windows XP 普及 ,其 内 置 的 IE 6 对 CSS 
的 支持 显著 改善 ,使 我 国 设计 师 开 始 重视 CSS, 并 逐渐 遵循 Web 标准 来 设计 网 页 了 。 
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3.3 ”HTML 元 素 的 概念 


HTML 文档 是 由 各 种 HTML 元 素 组 成 的 ,网 页 中 文字 、 图 像 . 链 接 等 所 有 的 内 容 都 
是 以 元 素 的 形式 定义 在 HTML 代码 中 的 ,因此 元 素 是 构成 HTML 文档 的 基本 部 件 。 元 
素 是 用 标记 来 表现 的 ,一 般 起 始 标记 表示 元 素 的 开始 ,结束 标记 表示 元 素 的 结束 。 把 
HTML 标记 (如 过 p 盖 … 志 /p 之 ) 和 标记 之 间 的 内 容 组 合 称 为 元 素 。 

HTML 元 素 可 分 为 “有 内 容 的 元 素 ” 和 “ 空 元 素 ” 两 种 。“ 有 内 容 的 元 素 ” 是 由 起 始 标 记 、 
结束 标记 和 两 者 之 间 的 内 容 组 成 ,其 中 元 素 内 容 既 可 以 是 文字 内 容 , 也 可 以 是 其 他 元 素 。 
例如 ,一 个 b 元 素 ( 二 b 二 这 是 粗 体 字 二 /b 二 ) , 它 的 元 素 内 容 是 文字 “这 是 粗 体 字 ”; 而 
html 元 素 的 内 容 是 另 两 个 元 素 (head 元 素 和 body 元 素 )。“ 空 元 素 ” 则 只 有 起 始 标 记 而 没 
有 结束 标记 和 元 素 内 容 。 例 如 ,二 br /二 元 素 就 是 空 元 素 , 可 见 “ 空 元 素 ” 对 应 单 标记 。 

标记 相同 而 标记 中 的 内 容 不 同 应 视 为 不 同 的 元 素 , 同 一 网 页 中 标记 和 标记 的 内 容 都 
相同 的 元 素 如 果 出 现 两 次 也 应 视 为 两 个 不 同 的 元 素 ,因为 浏览 器 在 解释 HTML 中 每 个 
元 素 时 都 会 为 它 自动 分 配 一 个 内 部 ID, 不 存在 两 个 元 素 的 ID 也 相同 的 情况 。 

例 3.1 在 如 下 代码 中 ,body 标记 内 共有 多 少 个 元 素 ? 





<html> < body> 
<a href= "box.html"> < img src= "cup.gif" border= "0" align= "left" /> < /a> 
< 户 图 片 的 说 明 内 容 < /p><hr/> 
< 户 图 片 的 说 明 内 容 < /p> 

< /body> < /hbm> 


答案 : 5 个 , 即 1 个 a 元 素 、1 个 img 元素 .2 个 p 元 素 和 1 个 hr 元 素 。 


3.3.1 行内 元 素 和 块 级 元 素 


HTML 元 素 还 可 以 按 男 一 种 方式 分 为 “行内 元 素 ” 和 “ 抉 级 元 素 ”。 下 面 是 一 段 
HTML 代码 , 它 的 显示 效果 如 图 3-5 所 示 , 请 注意 元 素 中 的 内 容 在 浏览 器 中 是 如 何 排 
列 的 。 


<html> <body> 
<h2>web 标 准 < /h2><a hre 伍 叶 ">w3c 主 页 < /a> 
< img src= "arrow.gif" width= "16" height= "16" 人 ><b> 结 构 < /b> 
<font> 表 现 < /font> < spar> 行 为 < /span> 
< 户 结构 标准 语言 RM /p><ul><1 户 表现 标准 语言 css< /1i>< /ul> 
<div> 行 为 标准 语言 Javascript< /div> 
< /body> < /htm> 
从 图 3-5 中 可 以 看 到 ,h2、p、div 这 些 元 素 中 的 内 容 会 占 满 一 整 行 ,而 a、img、span 这 
些 元 素 在 一 行内 从 左 到 右 排列 ,它们 占据 的 宽度 刚好 能 容纳 元 素 中 内 容 的 最 小 宽度 。 根 
据 元 素 是 否 会 占据 一 整 行 ,可 以 把 HTML 元 素 分 为 行内 元 素 和 块 级 元 素 。 
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行内 (inline) 元 素 是 指 元 素 与 元 素 之 间 从 左 到 右 并 排 排列 ,只 有 当 浏 览 器 窗口 容纳 不 
下 才 会 转 到 下 一 行 , 块 级 (block) 元 素 是 指 每 个 元 素 占据 浏 
览 器 一 整 行 位 置 , 块 级 元 素 与 块 级 元 素 之 间 自 动 换行 ,从 
上 到 下 排列 。 块 级 元 素 内 部 可 包含 行内 元 素 或 块 级 元 素 ， 一 到 
行内 元 素 内 部 可 包含 行内 元 素 ,但 不 得 包含 块 级 元 素 。 另 | web 标 准 YK 
外 , 块 级 元 素 二 p 记 元 素 内 部 也 不 能 包含 其 他 的 块 级 元 素 。 i 
3.3.2 div 和 span 标记 ET 
| … 表现 标准 语言 css “| | 
二 div 之 和 二 span 二 是 不 含有 语义 的 标记 ,用 来 在 标记 ES 
中 放置 任何 网 页 元 素 (如 文本 、 图 像 等 )。 就 像 一 个 容器 一 
样 , 当 把 内 容 放 入 后 ,内 容 的 外 观 不 会 发 生 任何 改变 ,这 样 
有 利于 内 容 和 表现 分 离 。 应 用 容器 标记 的 主要 作用 是 通 
过 引入 CSS 属性 对 容器 内 的 内 容 进行 设置 。div 和 span 唯一 的 区 别 是 : div 是 块 级 元 素 ， 
span 是 行内 元 素 。 下 面 是 一 段 示例 代码 ,显示 效果 如 图 3-6 所 示 。 








图 3-5 行内 元 素 和 块 级 元 素 


<html> <body> 
<div> div 元 素 1< /div> <div> div 元 素 I< /div> 
< span> span 元 素 1< /span> < span> span 元 素 2< /span> 
< /body> < /htm> 





图 3-6 div 元 素 和 span 元 素 的 区 别 (利用 CSS 为 每 个 元 素 添加 了 背景 和 边框 属性 ) 


可 以 看 出 div 元 素 作 为 块 级 元 素 会 占 满 整个 一 行 ,两 个 元 素 间 上 下 排列 ;而 span 元 
素 的 宽度 不 会 自动 伸展 ,以 能 包含 它 的 内 容 的 最 小 宽度 为 准 , 两 个 元 素 之 间 从 左 到 右 依次 


排列 。 
需要 注意 的 是 ,div 元 素 并 不 对 应 于 * 层 ”的 概念 ,过 去 说 的 层 是 指 通过 CSS 设置 成 了 


绝对 定位 的 div 元 素 , 但 实际 上 也 可 以 对 其 他 任何 标记 (如 二 p 二 ) 的 元 素 设置 成 绝对 定 
位 ,此 时 其 他 元 素 也 成 了 “ 层 ”。 因 此 层 并 不 对 应 于 任何 HTML 标记 ,所 以 Dreamweaver 
CS3 去 掉 了 层 这 一 概念 ,将 这 些 设置 成 了 绝对 定位 的 元 素 统称 为 AP(Absolute Position) 
元 素 。 


3.4 HTML 5 简介 


HTML 5 是 HTML 语言 的 最 新 版 本 ,其 前 身 是 由 网 页 超 文本 应 用 技术 工作 小 组 
WHATWG(CWeb Hypertext Application Technology Working Group) 于 2004 年 提出 的 
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Web Applications 1. 0。 在 2007 年 被 W3C 接纳 .并 成 立 了 新 的 HTML 工作 团队 。 
HTML 5 的 正式 版 本 于 2010 年 9 月 发 布 。 

HTML 5 已 经 被 IE 10 十 .Chrome 18 十 、Firefox 4、Safari 5 等 浏览 器 支持 ,对 于 不 支 
持 HTML 5 的 旧版 浏览 器 ,HTML 5 也 能 保证 旧版 浏览 器 能 够 安全 地 忽略 掉 HTML 5 
代码 ,力图 让 不 同 的 浏览 器 即使 在 发 生 语法 错误 时 也 能 返回 相似 的 显示 结果 。 


3.4.1 


HTML 5 新 增 的 标记 





与 HTML 4.01 相 比 ,HTML 5 提供 了 一 些 新 的 标记 和 属性 ,这 些 新 增 的 标记 主要 


可 分 为 : 


(1) 文档 结构 标记 ,例如 二 nav 二 (网 站 导航 条 区 域 ) 和 二 footer 记 (网 站 底部 区 域 ) 等 。 

这 些 标 记 将 有 利于 搜索 引擎 的 索引 整理 ,同时 更 好 地 帮助 小 屏幕 装置 和 视 障 人 士 使 用 。 
(2) 媒体 元 素 标记 ,如 一 audio 之 和 志 video 二 标记 。 
(3) 表单 标记 等 。 具 体 如 表 3-1 所 示 。 


表 3-1 HTML 5 新 增 的 标记 


















































标记 名 格 式 用 上 时 法 

=video> <video src="" width="" > </video> 插入 视频 

=audio> video src="" width="" .> … < /video> 插入 音频 

<canvas> |<canvas id="" width="" .> </canvas> 画布 标记 ,用 来 绘制 图 形 

command> | 一 command type=""> "</command> 定义 命令 按钮 

<datalist> |<datalist id=" ">*…</datalist> 定义 输入 框 的 附带 下 拉 列 表 

meter> st Max 一"” low 一 ”bigh | 宇 义 数值 条 

=progress> |<progress value="" max="">**</progress> 定义 进度 条 

<time> 一 time datetime="">< /time> 定义 日 期 或 时 间 

summary> | 一 summary 二 … 一 /summary 二 定义 元 素 的 摘要 

ce 一 details > < summary > … 一 /summary > … 定义 元 素 的 细节 , 常 与 summary 
/details> 标记 配合 

<figure> |<figure>< /figure> 人 WT 

mark> < 一 p 二 … 所 mark 二 突出 的 文本 二 /mark …</p 二 | 给 文本 加 背景 色 以 突出 显示 

<raby> 二 ruby>>ruby 注释 过 rt 之 解释 过 /rt> 过 /ruby> ”| 定义 ruby 语言 的 注释 

<rt> 同上 定义 ruby 注释 的 解释 

=wbr> XML=—=wbr> Http<=wbr> Request 要 面 昌 度 丰 是 于 一 个 香 本 内 





下 面 是 几 个 HTML 5 标记 的 使 用 示例 。 





字母 换行 的 位 置 


第 3 章 XHTMLSWeb 标 准 一 (95) 





1. 二 meter 过 与 二 progress 二 标记 


所 meter 盖 与 所 progress 二 属于 状态 交互 元 素 , 其 示例 代码 如 下 ,运行 效果 如 图 3-7 所 
示 。 其 中 ,value 属性 用 于 设置 元 素 展示 的 实际 值 ,默认 为 0;min 和 max 用 于 设置 元 素 展 
示 的 最 小 值 和 最 大 值 ,low 和 high 用 于 设置 元 素 展 示 的 最 低 值 和 最 高 值 。 其 范围 应 该 在 
min 和 max 值 的 范围 以 内 。 
< 户 速 度 :<meter value= "120" minr "0" max= "220" low= "0" high= "160"> 
120< /meter> ka /p> 
<p> 剩 余 油 量 :< progress value= "30" max= "100"> 30/100< /progress> < /E> 


2. 二 details 二 与 二 summary 过 标记 


去 details 之 标记 初始 时 只 会 显示 其 中 过 summary 之 标记 的 内 容 , 当 用 户 单 击 
过 summary 之 标记 时 ,会 展开 显示 过 details 之 标记 的 所 有 内 容 。 示 例 代 码 如 下 ,网 页 载 人 
时 只 显示 “衡阳 师范 学 院 ”, 当 用 户 单 击 “衡阳 师范 学 院 ” 时 ,其 运行 效果 如 图 3-8 所 示 。 
<details> 
<sumary> 衡 阳 师 范 学 院 < /summary> 
<p> 湖 南 省 直属 的 一 所 普通 全 日 制 公 办 本 科 院 校 < /p> 


区 衡阳 师范 学 院 
湖南 省 直属 的 一 所 普通 全 日 制 公办 本 科 院 校 


图 3-7 ”二 meter 二 与 二 progress 二 标记 示例 图 3-8 志 details 二 与 二 summary 二 标记 示例 














提示 : 在 HTML 5 中 ,已 经 取消 了 一 些 过 时 的 HTML 4 标记 。 这 主要 包括 : 

(1) 字体 标记 ,如 二 font 二 所 b>、 志 center 二 所 marquee 二 等 ,它们 已 经 被 CSS 
取代 ; 

(2) Java 小 程序 嵌入 标记 所 applet 二 ; 

(3) 框架 标记 所 frameset 二 、 王 frame 二 等 。 


3.4.2 HTML 5 语法 的 改进 
1. 文档 类 型 声明 的 改进 


在 HTML 5 文档 中 声明 文档 类 型 的 (DOCTYPE) 的 代码 已 经 变 得 非常 简洁 ,代码 
如 下 : 


< IDOCTYFE html> 


可 见 , 在 HTML 5 中 已 不 再 有 3 种 不 同文 档 类 型 (过 渡 型 .严格 型 和 框架 型 ) 的 区 别 。 
2. 指定 字符 编码 
如 果 想 指定 文档 使 用 的 字符 编码 ,HTML 5 仍然 使 用 meta 属性 ,但 代码 已 经 简化 
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如 下 : 





<meta harset= mutf_ 8"> 
3. 属性 书写 的 简化 


HTML 5 对 标记 和 属性 的 写法 又 回归 到 了 简化 的 风格 ,这 包括 : 属性 如 果 只 有 唯一 
值 ( 如 checked) , 则 可 省 略 属性 值 ,属性 值 两 边 的 引号 也 可 省 略 , 例 如 ,下 面 的 写法 都 是 正 
确 的 : 

< input type= "text" name= "pwd" required> 

< jmg src= foo alt=bar> 

<p class= foo> Hello worldc /p> 


4. 超 链接 可 以 包含 块 级 元 素 


在 过 去 ,要 想 给 很 多 块 级 元 素 添 加 超 链 接 , 只 能 在 每 个 块 级 元 素 内 巾 和 人 二 a 二 标记 ,在 
HTML 5 中 ,只 要 简单 地 把 所 有 内 容 都 写 在 一 个 链接 元 素 中 就 可 以 了 。 示 例 代码 如 下 : 


<ahref="#"> 
<h2> 标 题 文本 < /h2> 
< 了 全 段落 文本 < /p> 
</a> 
习题 3 
1. 在 XHTML 中 必须 声明 文档 类 型 ,以 便于 浏览 器 知道 当前 浏览 的 文档 的 类 型 , 声 
明文 档 类 型 需 使 用 指令 


2. Web 标准 主要 由 一 系列 规范 组 成 ,目前 的 Web 标准 主要 由 三 大 部 分 组 成 





3. 所 有 XHTML 标记 必须 和 
4. 在 XHTML 中 ,有 3 种 文档 类 型 声明 DTD, 分 别 是 








和 








si 


CSS(Cascading Styles Sheets, 层 到 样 式 表 ) 是 用 于 控制 网 页 样式 并 允许 将 样式 信息 
与 网 页 内 容 分 离 的 一 种 标记 性 语言 。HTML 和 CSS 就 是 内容 ”和 “形式 ”的 关系 ,由 
HTML 组 织 网 页 内 容 的 结构 ,而 通过 CSS 来 决定 页 面 的 表现 形式 。CSS 和 XHTML 都 
是 由 W3C 负责 组 织 和 制定 的 。 

由 于 HTML 的 主要 功能 是 描述 网 页 的 结构 ,所 以 控制 网 页 外 观 的 能 力 很 差 , 如 无 法 
精确 调整 文字 大 小 行距 等 ,而 且 不 能 对 多 个 网 页 元 素 进行 统一 的 样式 设置 ,只 能 一 个 一 
个 元 素 地 设置 。 使 用 CSS 可 实现 对 网 页 的 外 观 和 排版 进行 更 灵活 的 控制 ,使 网 页 更 
美观 。 


4.1 CSS 基础 


CSS 样式 表 是 由 一 系列 样式 规则 组 成 的 ,浏览 器 将 这 些 规则 应 用 到 相应 的 元 素 上 ， 
CSS 语言 实际 上 是 一 种 描述 HTML 元 素 外 观 (样式 ) 的 语言 ,下 面 是 一 条 CSS 样式 规则 
和 描述 一 个 人 的 特征 的 规则 的 对 比 。 


4.1.1 CSS 的 语法 


一 条 CSS 样式 规则 由 选择 器 (Selector) 和 声明 (Declarations) 组 成 ,如 图 4-1 所 示 。 
选择 器 是 为 了 选中 网 页 中 某 些 元 素 的 ,也 就 是 告诉 浏览 器 ,这 段 CSS 样式 规则 将 应 用 到 
哪 组 元 素 上 。 

选择 器 用 来 定义 CSS 规则 的 作用 对 象 , 它 可 以 是 一 个 标记 名 ,表示 将 网 页 中 所 有 该 
标记 的 元 素 全 部 选中 。 如 图 4-1 中 的 hl 选择 器 就 是 一 个 标记 选择 器 , 它 将 网 页 中 所 有 
过 hl 标记 的 元 素 全 部 选中 ,而 声明 则 用 于 定义 元 素 样式 。 介 于 花 括号 { } 之 间 的 所 有 内 
容 都 是 声明 ,声明 又 分 为 属性 (Property) 和 值 (value) ,图 4-1 中 的 示例 为 所 有 二 hl 二 标记 
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声明 声明 
hl { es | font-size: 25px; | } 
[和 
选择 器 属性 值 属性 值 


图 4-1 CSS 样式 规则 的 组 成 (标记 选择 器 ) 


的 元 素 定义 了 2 个 属性 ,使 该 网 页 中 所 有 hl 元 素 的 文本 都 将 是 红色 并 且 是 25 像素 大 小 。 
属性 是 CSS 样式 控制 的 核心 ,对 于 每 个 HTML 元 素 ,CSS 都 提供 了 丰富 的 样式 属 
性 ,如 颜色 、 大 小 、 背 景 、 盒 子 、 定 位 等 。 表 4-1 列 出 了 一 些 最 常用 的 CSS 属性 。 
表 4-1 最 常用 的 CSS 属性 


























属性 Ee 举 例 
font-size 字体 大 小 font-size:14px; 
color 字体 颜色 ( 仅 能 设置 字体 的 颜色 ) color: red; 
line-height 行 高 line-height:160%; 
text-decoration 文本 修饰 (如 增删 下 划 线 ) text-decoration: none; 
text-indent 文本 缩 进 text-indent:2em; 
background-color 背景 颜色 background-color: # ffeeaa; 


CSS 的 属性 和 值 之 间 用 冒号 隔 开 (注意 CSS 属性 和 值 的 写法 与 HTML 属性 的 区 
别 )。 如 果 要 设置 多 个 属性 和 值 , 可 以 书写 多 条 声明 ,每 条 声明 之 间 用 分 号 隔 开 。 
对 于 属性 值 的 书写 ,有 以 下 规则 : 
。 如 果 属 性 的 某 个 值 不 是 一 个 单词 , 则 值 要 用 引号 引起 来 ,如 
p {font- family: "sans serif"} 
。 如 果 一 个 属性 有 多 个 值 . 则 每 个 值 之 间 要 用 空格 隔 开 ,如 
a {padding: px px 3px} 
。 如 果 要 为 某 个 属性 设置 多 个 候选 值 , 则 每 个 值 之 间 用 逗号 隔 开 , 如 


p {ftcont- family: "Times New Roman", Times, serif} 


4.1.2 在 HTML 中 引入 CSS 的 方法 


HTML 和 CSS 是 两 种 作用 不 同 的 语言 ,它们 同时 对 一 个 网 页 产生 作用 ,必须 通过 一 
些 方法 将 CSS 与 HTML 挂 接 在 一 起 ,才能 正常 工作 。 
在 HTML 中 ,引入 CSS 的 方法 有 行内 式 、. 嵌 入 式 . 导 入 式 和 链接 式 4 种 。 


1. 行内 式 
所 有 HTML 标记 都 有 一 个 通用 的 属性 style, 行 内 式 就 是 将 元 素 的 CSS 规则 作为 
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style 属性 的 属性 值 写 在 元 素 的 标记 内 ,例如 : 


<td style= "color: red; text- decoration: underline" width "924 "> 


行内 式 引 入 的 优点 是 : 由 于 CSS 规则 就 写 在 标记 内 ,其 作用 对 象 就 是 该 元 素 , 所 以 无 
须 书写 CSS 的 选择 器 。 有 时 需要 做 测试 或 对 个 别 元 素 设置 CSS 属性 ,这 时 可 以 使 用 这 种 
方式 ,只 需要 书写 属性 和 值 ,但 它 没有 体现 出 CSS 统一 设置 许多 元 素 样式 的 优势 。 


2. 其 入 式 


杏 入 式 将 页 面 中 各 种 元 素 的 CSS 样式 设置 集中 写 在 二 style 之 和 所 /style 之 之 间 ， 
二 style 二 标记 是 专用 于 引入 髋 入 式 CSS 的 一 个 html 标记 , 它 只 能 放置 在 文档 头 部 , 即 
< 近 style 之 … 王 /style 之 只 能 放置 在 文档 的 二 head 二 和 过/head 盖 之 间 。 例 如 : 
<head> 
< style type= "text/css"”> < !-- 该 标记 用 来 嵌入 css 代 码 --> 
hl{ 
color: red; 
font- size: 25px7 } 
< /style> 
< head> 
为 单一 的 网 页 设置 样式 ,嵌入 式 方 式 很 方便 上 且 最 常用 。 但 是 对 于 一 个 包含 很 多 网 页 的 网 
站 来 说 ,如 果 每 个 网 页 都 以 嵌入 式 的 方式 设置 各 自 的 样式 ,不 仅 麻烦 ,元 余 代码 多 ,而 且 网 
站 中 各 个 页 面 的 风格 不 好 统一 。 因 此 ,对 于 一 个 网 站 来 说 ,通常 都 是 编写 独立 的 CSS 文 
件 ,使 用 以 下 两 种 方式 之 一 ,引入 到 网 站 的 所 有 HTML 网 页 文档 中 。 


3. 链接 式 和 导入 式 


当 CSS 样式 需要 应 用 于 很 多 页 面 时 ,外 部 样式 表 ( 外 部 CSS 文件 ) 将 是 理想 的 选择 。 
所 谓 外 部 样式 表 , 就 是 将 CSS 规则 写 入 到 一 个 单独 的 文本 文件 中 ,并 将 该 文件 的 后 缀 名 
命名 为 . css。 然 后 使 用 链接 式 或 导入 式 的 方法 将 外 部 CSS 文件 引入 到 HTML 文件 中 ， 
其 优点 是 可 以 让 很 多 个 网 页 共享 一 个 CSS 文件 设置 的 样式 。 

在 学 习 CSS 或 制作 单个 网 页 时 ,为 了 方便 可 采取 行内 式 或 戏 和 人 式 方法 引入 CSS ,但 
若 要 制作 网 站 , 则 主要 应 采用 链接 式 引 入 外 部 CSS 文件 ,以 便 使 网 站 内 的 所 有 网 页 风格 
统一 。 而 且 在 使 用 外 部 样式 表 的 情况 下 ,可 以 通过 改变 一 个 外 部 CSS 文件 来 改变 整个 网 
站 所 有 页 面 的 外 观 。 下 面 介 绍 引 入 外 部 CSS 文件 的 方法 。 

链接 式 是 在 网 页 头 部 使 用 HTML 标记 二 link 盖 引入 外 部 CSS 文件 ,语法 如 下 : 


< link href= "stylel.css" rel= "stylesheet" type= "text/css" /> 
其 中 stylel. css 的 文件 内 容 如 下 (注意 该 文件 中 不 需要 书写 二 style 二 标记 ): 


nt 
color: red; 
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而 导入 式 是 通过 CSS 规则 中 的 @import 指令 来 导入 外 部 CSS 文件 ,语法 如 下 : 





< style type= "text/css"> 
@ import url ("stylel.css"); 
</style> 
此 外 ,这 两 种 方式 的 显示 效果 也 略 有 不 同 。 使 用 链接 式 时 ,会 在 装载 页 面 主体 部 分 之 
前 装载 CSS 文件 ,这 样 显示 出 来 的 网 页 从 一 开始 就 是 带 有 样式 效果 的 ;而 使 用 导入 式 时 ， 
要 在 整个 页 面 装载 完 之 后 再 装载 CSS 文件 ,如 果 页 面 文件 比较 大 , 则 开始 装载 时 会 显示 
无 样式 的 页 面 。 从 浏览 者 的 感受 来 说 ,这 是 使 用 导入 式 的 一 个 缺陷 。 


4.1.3 选择 器 的 分 类 


选择 器 就 是 为 了 选中 文档 中 要 应 用 样式 的 那些 元 素 , 为 了 能 够 灵活 选中 文档 中 的 某 
类 或 某 些 元 素 ,CSS 定义 了 很 多 种 选择 器 。 其 中 ,基本 的 CSS 选择 器 包括 标记 选择 器 .类 
选择 器 ID 选择 器 和 伪 类 选择 器 4 种 。 


1. 标记 选择 器 
标记 是 元 素 的 固有 特征 ,标记 选择 器 用 来 声明 哪 种 标记 采用 哪 种 CSS 样式 。 因 此 ， 


每 一 个 HTML 标记 的 名 称 都 可 以 作为 相应 的 标记 选择 器 的 名 称 , 标 记 选 择 器 形式 如 图 
4-1 所 示 , 它 将 属于 该 标记 的 所 有 元 素 全 部 选中 。 例 如 : 





< style type= "text/css"> 
pt /* 标记 选择 器 * / 
Color:blue; 
font- size:l8px; 3 
< /style> 
< 了 选择 器 之 标记 选择 器 1< /p> 
< 全 选择 器 之 标记 选择 器 2< /p> 
< 户 选 择 器 之 标记 选择 器 < /p> 
<h3>h3 则 不 适用 < /h3> 
以 上 所 有 3 个 p 元 素 都 会 应 用 p 标记 选择 器 定义 的 样式 ,显示 为 " 蓝 色 ,18 像素 大 ”， 
而 h3 元 素 则 不 会 受到 影响 。 
提示 : 本 书 对 代码 采用 了 简略 写法 , 书 中 CSS 代码 主要 采用 嵌入 式 方式 引入 HTML 
文档 中 。 因 此 ,读者 只 要 将 代码 中 二 style 二 … 王 /style 之 部 分 放置 在 文档 的 二 head 二 和 
< 所 /head> 之 间 ,将 其 他 HTML 代码 放置 在 王 body 二 和 所/body 二 之 间 , 就 能 还 原 成 可 运 
行 的 原始 代码 。 


2. 类 选择 器 
标记 选择 器 一 旦 声明 ,那么 页 面 中 所 有 该 标记 的 元 素 都 会 产生 相应 的 变化 。 例 如 , 当 


声明 过 p> 标 记 为 红色 时 ,页 面 中 所 有 的 p 元素 都 将 显示 为 红色 。 但 是 如 果 希 望 其 中 某 一 
些 p 元 素 不 是 红色 ,而 是 蓝 色 ,就 需要 将 这 些 p 元 素 自 定义 为 一 类 ,用 类 选择 器 来 选中 它 
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们 ;或 者 希望 不 同 标记 的 元 素 属于 同一 类 ,应 用 同一 样式 ,如 希望 某 些 p 元 素 和 h3 元 素 都 
是 蓝 色 , 则 可 以 将 这 些 不 同 标 记 的 元 素 定义 为 同一 类 。 也 就 是 说 ,标记 选择 器 根据 元 素 的 
固有 特征 (标记 名 ) 分 类 ,好 比 人 可 以 根据 固有 特征 “肤色 ”分 为 黄种 人 、 黑 种 人 和 白 种 人 ， 
而 类 选择 器 是 人 为 地 对 元 素 分 类 ,比如 人 又 可 以 分 为 教师 医生、 公务 员 等 这 些 社会 自 定 
义 的 类 别 。 

要 应 用 类 选择 器 ,首先 应 给 相应 的 HTML 元 素 添 加 一 个 通用 HTML 属性 class, 只 
要 对 不 同 的 元 素 定义 相同 的 类 名 ,那么 这 些 元 素 将 被 划分 成 同一 类 ,例如 


<h3 class= "test"> 将 该 元 素 划 入 test 类 < /h3> 
<p class= "test"> 将 该 元 素 划 入 test 类 < /p> 


然后 再 根据 类 名 定义 类 选择 器 来 选中 该 类 元 素 ,类 选择 器 以 半角 “. ”开头 ,格式 如 下 : 
.test{ color: red; font- size:20px; } 
下 面 的 代码 中 定义 了 2 个 类 选择 器 ,并 为 4 个 HTML 元 素 应 用 了 类 选择 器 的 样式 。 


< style type= "text/css"> 


.one{ /* 类 选择 器 .onex / 
color: red; /* 字体 颜色 红色 * / 

} 

.twof /* 类 选择 器 .bwox / 


font- size:20px; /* 文字 大 小 20 像 素 * / 

} 

< /style> 
< 户 选 择 器 之 标记 选择 器 1< /p> 
<p class= "one"> 应 用 第 一 种 class 选择 器 样式 < /p> 
<p class= "two> 应 用 第 二 种 class 选择 器 样式 < /p> 
<p class= "one two"> 同 时 应 两 种 class 选择 器 样式 < /p> 
<h3 class= "two"> h3 同 样 适用 < /h3> 


其 中 第 3 个 p 元 素 和 h3 元 素 被 定义 成 了 同一 类 ,而 第 4 行 通过 class 二 "one two" 将 
同时 应 用 两 种 类 选择 器 的 样式 ,得 到 红色 20 像素 的 大 字体 。 对 一 个 元 素 定义 多 个 类 名 是 
允许 的 ,就 好 像 一 个 人 可 能 既 属于 教师 又 属于 作家 一 样 。 第 一 行 的 p 元 素 因 未 定义 类 别 
名 则 不 受 影 响 , 仅 作为 对 比 。 

3. ID 选择 器 


ID 选择 器 的 使 用 方法 与 类 选择 器 基本 相同 。 不 同 之 处 在 于 一 个 ID 选择 器 只 能 应 用 
于 一 个 元 素 , 而 类 选择 器 可 以 应 用 于 多 个 元 素 。ID 选择 器 以 半角 “# ”开头 ,格式 如 下 : 


#one { color : blue; font- size:l8px; } 
要 应 用 ID 选择 器 定义 的 样式 ,首先 必须 给 某 个 元 素 添加 ID 属性 。 示 例 代 码 如 下 : 


< style type= "text/css"> 
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#one{ 
font- weight :bold; /x 粗 体 x*/ 1} 
#twof 
font- size:30px; /* 字体 大 小 */ 
color:#009900; /x 颜色 x/ } 
< /style> 
<p id "one"> ID 选 择 器 1< /p> < 上 -第 1 行 --> 


<p id "two"> ID 选 择 器 2 /p> 
<p id "two"> ID 选 择 器 3c /p> 
<p ic "one two"> ID 选择 器 3< /p> 
上 例 中 ,第 1 行 应 用 了 #one 的 样式 。 而 第 2 行 和 第 3 行将 同一 个 ID 选择 器 应 用 到 
两 个 元 素 上 ,显然 违反 了 一 个 ID 选择 器 只 能 应 用 在 一 个 元 素 上 的 规定 ,但 浏览 器 却 也 显 
示 了 CSS 样式 风格 且 没 有 报错 。 尽 管 如 此 ,我 们 在 编写 CSS 代码 时 ,还 是 应 该 养 成 良好 
的 编码 习惯 ,一 个 ID 最 多 只 能 赋予 一 个 HTML 元 素 , 因 为 每 个 元 素 定义 的 ID 不 只 是 
CSS 可 以 调用 ,JavaScript 等 脚本 语言 也 可 以 调用 ,如 果 一 个 HTML 文档 中 有 两 个 相同 
ID 属性 的 元 素 , 那 么 将 导致 JavaScript 在 查找 ID 时 出 错 ( 如 getElementById () 函 数 ) 。 
第 4 行 在 浏览 器 中 没有 任何 CSS 样式 风格 显示 ,这 意味 着 ID 选择 器 不 支持 像 class 
选择 器 那样 的 多 个 ID 名 同时 使 用 。 因 为 每 个 元 素 和 它 的 ID 是 一 一 对 应 的 关系 ,不 能 为 
一 个 元 素 指定 多 个 ID ,也 不 能 将 多 个 元 素 定义 为 一 个 ID。 类 似 id="one two" 这 样 的 写 
法 是 错误 的 。 
关于 类 名 和 ID 名 是 否 区 分 大 小 写 ,CSS 大 体 上 是 不 区 分 大 小 写 的 语言 ,但 对 于 类 名 
和 ID 名 是 否 区 分 大 小 写 取 决 于 标记 语言 是 否 区 分 大 小 写 ,如 果 使 用 XHTML ,那么 类 名 
和 ID 名 是 区 分 大 小 写 的 ;如 果 是 HTML, 则 不 区 分 大 小 写 。 另 外 ,ID 名 或 类 名 的 第 一 个 
字符 不 能 为 数字 。 


4.1.4 ”CSS 文本 修饰 


文本 的 美化 是 网 页 美观 的 一 个 基本 要 求 。 通 过 CSS 强大 的 文本 修饰 功能 ,可 以 对 文 
本 样式 进行 更 加 精细 的 控制 ,其 功能 远 比 HTML 中 的 二 font 二 标记 强大 。 

CSS 中 控制 文本 样式 的 属性 主要 有 font- 属 性 类 和 text- 属 性 类 ,再 加 上 修改 文本 颜 
色 的 color 属性 和 行 高 line-height 属性 。Dreamweaver 中 这 些 属性 的 设置 是 放 在 CSS 规 
则 定义 面板 的 “类 型 "和 “区 块 " 中 的 。 下 面 是 利用 CSS 文本 属性 对 文章 进行 排版 的 例子 
(4-1. html) ,其 显示 效果 如 图 4-2 所 示 。 





< style type= "text/css"> 
mt 
font- size: 16px7 
text— align: Center7 
letter— spacing: 0.3em} 
pl 
font— size: 12pK7 
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Jine _ height: 160% ; 
text— indent: 2em;} 
-SOUFCe { 
Color: #999999; 
text- align: right;} 
</style> 
<hl> 失 败 的 权利 < /hi> 
<p class= "source"> 2006 年 5 月 11 日 ”美国 《 侨 报 》< /p> 
<B> 自 从 儿子 进 了 足球 队 ，…… ,不 亲身 经 历 是 无 法 体会 的 。< /E> 
< 户 他 们 队 有 个 传统 ,…… 几乎 是 战 无 不 胜 的 。< /p> 
< 户 在 我 看 来 ,…… 孩 子 们 是 当之无愧 的 。< /p> 
< 户 接 受 孩子 的 失败 ,就 给 了 他 成 功 的 机 会 。< /e> 


EMT ST =Io|x]| 
文件 人 编辑 EE) 查看 WD) 历史 G) 书签 @) 工具 中 帮助 0D 


失败 的 权利 





2006 年 5 月 11 日 美国 《 恬 报 》 


自从 儿子 进 了 足球 队 ， 我 们 便 随 着 他 转战 各 地 打 比 赛 。 这 之 中 有 捧 回 冠军 杯 的 溜 煌 ， 也 
有 败 走 妻 城 的 肖 珍 ， 其 中 滋味 ， 不 亲身 经 历 是 无 法 体会 的 。 


他 们 队 有 个 传统 ， 就 是 比赛 结束 的 时 候 ， 家 长 们 站 成 一 排 ， 伸 手 跟 跑 过 来 的 小 队员 击 学 
庆贺 。 我 一 直 很 欣赏 这 个 传统 ， 这 是 一 个 技术 成 熟 的 足球 队 ， 在 和 许多 足球 队 交 锋 的 时 候 几 
平 是 战 无 不 胜 的 。 


在 我 看 来 ， 就 这 个 动作 的 合 义 而 言 ， 孩 子 们 是 当之无愧 的 。 
接受 孩子 的 失败 ,就 给 了 地 成 功 的 机 会 。 


图 4-2 用 CSS 文 本 属性 修饰 文本 





其 中 text-indent 表示 首 行 缩 进 , 在 每 段 开 头 空 两 格 通常 是 用 text-indent: 2em 来 实 
现 ,textrdecoration :none 表示 去 掉 下 划 线 ,line-height: 160% 表 示 行 距 为 字体 高 度 的 1.6 
信 。letter-spacing 用 于 设置 字符 间 的 水 平 间 距 。text-align 用 于 设置 文本 的 对 齐 方式 。 

由 于 大 部 分 HTML 元 素 的 浏览 器 默认 字体 大 小 是 16px, 显 得 过 大 ;行距 是 单 倍 行 
距 ,显得 过 窗 。 因 此 制作 网 页 文本 时 很 有 必要 使 用 CSS 文本 属性 对 其 进行 调整 ,网 页 中 
流行 的 字体 大 小 有 12px 和 14px, 这 两 种 字体 大 小 都 比较 美观 。 

如 果 要 设置 的 字体 属性 过 多 ,可 以 使 用 字体 属性 的 缩写 font, 例 如 “font: 12px/1.6 
Arial; ”表示 12 像素 字体 大 小 ,1.6 倍 行距 ,但 必须 同时 定义 字体 和 字号 才 有 效 , 因 此 这 条 
规则 中 定义 的 字体 Arial 是 不 能 省 略 的 。 


4.1.5 伪 类 选择 器 及 其 应 用 


伪 类 (pseudo-class) 是 用 来 表示 动态 事件 、 状 态 改变 或 者 是 在 文档 中 以 其 他 方法 不 能 
轻易 实现 的 情况 一 一 例如 用 户 的 鼠标 基 停 或 单 击 某 元 素 。 总 的 来 说 , 伪 类 可 以 对 目标 元 
素 出 现 某 种 特殊 的 状态 应 用 样式 。 这 种 状态 可 以 是 鼠标 停留 在 某 个 元 素 上 ,或 者 是 访问 
一 个 超 链 接 。 伪 类 允许 设计 者 自由 指定 元 素 在 一 种 状态 下 的 外 观 。 
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1. 常见 的 伪 类 选择 器 


常用 的 伪 类 有 4 个 ,分 别 是 :link( 链 接 ) :visited( 已 访问 的 链接 )、:hover( 鼠 标 悬 停 
状态 ) 和 :active( 激 活 状态 )。 其 中 前 面 两 个 称 为 链接 伪 类 ,只 能 应 用 于 链接 a 元 素 , 后 两 
种 称 为 动态 伪 类 ,理论 上 可 以 应 用 于 任何 元 素 , 但 IE 6 只 支持 a 元素 的 上 述 伪 类 。 其 他 
的 一 些 伪 类 如 :focus( 获 得 焦点 时 的 状态 ) 因 为 在 IE 6 中 不 支持 ,所 以 用 得 较 少 。 伪 类 选 
择 器 必须 指定 标记 名 , 且 标记 和 伪 类 之 间 用 ”*:” 隔 开 ,示例 代 码 如 下 : 


a:hover { color : red; text- decoration: underline; } 
该 示例 中 的 伪 类 选择 器 作用 是 定义 所 有 a 元 素 在 鼠标 悬 停 (hover) 状 态 下 的 样式 。 
2. 伪 类 选择 器 的 应 用 一 一 制作 动态 超 链接 


在 默认 情况 下 ,网 页 中 的 超 链接 为 统一 的 蓝 色 带 下 划 线 ,被 单 击 过 的 超 链接 则 为 紫色 
带 下 划 线 ,这 种 传统 的 超 链接 样式 看 上 去 过 于 呆板 。 

但 现在 大 多 数 网 页 中 的 超 链 接 初 始 时 都 没有 下 划 线 ,并 且 具 有 动态 效果 。 例 如 , 当 光 
标 移动 到 超 链 接 上 时 , 超 链接 会 变色 并 添加 下 划 线 等 ,以 提示 用 户 这 里 可 以 单 击 , 这 样 不 
仅 美观 而 且 对 用 户 更 友好 。 而 在 HTML 中 ,只 能 用 二 a 二 标记 来 表示 链接 元 素 , 并 没有 
设置 超 链接 在 不 同 状态 下 样式 的 方法 。 

动态 超 链接 是 通过 CSS 伪 类 选择 器 实现 的 ,因为 伪 类 可 以 描述 超 链 接 在 不 同 状态 下 
的 样式 ,所 以 我 们 通过 定义 a 元 素 的 各 种 伪 类 具有 不 同 的 样式 ,就 能 制作 出 千变万化 的 动 
态 超 链接 效果 。 具 体 来 说 ,二 a 二 标记 有 4 种 伪 类 ,用 来 描述 链接 的 4 种 状态 ,如 表 4-2 














所 示 。 
表 4-2 超 链 接 二 a 二 标记 的 4 个 伪 类 
伪 类 作 用 
a:link 超 链接 的 普通 样式 风格 , 即 正常 浏览 状态 时 的 样式 
a:visited 被 单 击 过 的 超 链接 的 样式 风格 
a:hover 鼠标 指针 其 停 在 超 链接 上 时 的 样式 风格 
a:active 当前 激活 (在 鼠标 单 击 与 释放 之 间 发 生 ) 的 样式 风格 





通过 CSS 伪 类 ,只 要 分 别 定义 上 述 4 个 状态 (或 其 中 几 个 ) 的 样式 代码 ,就 能 实现 动 
态 超 链接 效果 ,如 图 4-3 所 示 。 代 码 如 下 : 


< style type= "text/css"> 

a { font- size: 14pxy ”text- decoration: none; } /* 设置 链接 的 默认 状态 * / 
a:link { color: #666; } 

a:visited { color: #000; } 

a:hover { color: #900; text- decoration: underline; background:#9CEF; } 

a:active { color: #FF3399; } 

</style> 


<ahre 伍 哇 吃 首 页 </a><a hre 伍 嘲 心 系 部 概况 </a><a hre 伍 哇 吃 联系 我 们 < /a> 


上 例 中 分 别 定 义 了 链接 在 4 种 不 同 的 状态 下 具有 不 同 的 
颜色 ,在 鼠标 悬 停 时 还 将 添加 下 划 线 并 改变 背景 颜色 。 需 要 注 
意 的 是 ， 

(1) 链接 伪 类 选择 器 的 书写 应 遵循 LVHA 的 顺序 , 即 CSS ”图 43 动态 超 链接 
代码 中 4 个 选择 器 出 现 的 顺序 应 为 a:link 一 a: visited 一 al: 
hover-~ asactive, 若 违反 这 种 顺序 , 某 些 样式 可 能 不 起 作用 。 

(2) 各 种 a 的 伪 类 选择 器 将 继承 二 a 二 标记 选择 器 定义 的 样式 。 

(3) a:link 选择 器 只 能 选中 具有 href 属性 的 二 a 二 标记 ,而 a 选择 器 能 选中 所 有 二 a 二 
标记 ,包括 用 作 锚 点 的 二 a 二 标记 。 


4.2 “CSS 的 特性 


CSS 具有 两 大 特性 : 层 登 性 和 继承 性 。 利 用 这 两 大 特性 可 大 大 减少 CSS 代码 的 编 
写 量 。 


4.2.1 CSS 的 层 受 性 


所 谓 层 释 性 ,是 指 多 个 CSS 选择 器 的 作用 范围 发 生 了 又 加 ,比如 页 面 中 某 些 元素 同 
时 被 多 个 选择 器 选中 (就 好 像 同一 个 案例 适用 于 多 个 法 律 条 文 一 样 )。 层 县 性 讨论 的 问题 
是 : 当 有 多 个 选择 器 都 作用 于 同一 元 素 时 ,CSS 该 如 何 处 理 ? 

CSS 的 处 理 原 则 如 下 

(1) 如 果 多 个 选择 器 定义 的 规则 未 发 生 冲 突 , 则 元 素 将 应 用 所 有 选择 器 定义 的 样式 。 
例如 ,下 面 代码 的 显示 效果 如 图 4-4 所 示 。 





< style type= "text/css"> 


pt /* 标记 选择 器 * / 
color:blue; 
font- size:18px;} 

-special{ /* 类 选择 器 * / 
font- weight: bold; } 

#underlinef /* 了 选择 器 * / 
text- decoration: underline; } /x* 有 下 划 线 * / 

< /style> 


< 了 标记 选择 器 1< /p> 

< 户 标记 选择 器 2< /p> 

<p class= "special"> 受 到 标记 、 类 两 种 选择 器 作用 < /p> 

<p id "underline" class= "special> 受 到 标记 、 类 和 卫 三 种 选择 器 作用 < /p> 

在 代码 中 ,所 有 p 元 素 都 被 标记 选择 器 p 选中 ,同时 第 3、4 个 p 元 素 又 被 类 选择 器 . 
special 选中 ,第 4 个 p 元 素 还 被 ID 选择 器 underline 选中 ,由 于 这 些 选择 器 定义 的 规则 没 
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有 发 生 冲 突 , 所 以 被 多 个 选择 器 同时 选中 的 第 3 和 第 4 个 元 素 将 应 用 多 个 选择 器 定义 的 


样式 。 EECTEECETRCEEOS 
(2) 如 果 多 个 选择 器 定义 的 规则 发 生 了 冲突 ， 家 四 庆 生计 ES Ri eol| 














则 CSS 按 选择 器 的 优先 级 让 元 素 应 用 优先 级 高 的 | 标记 选择 器 1 
选择 器 定义 的 样式 。CSS 规定 选择 器 的 优先 级 从 “ 标记 选择 器 2 
高 到 低 依次 为 : 受到 标记 、 类 两 种 选择 器 作用 
行内 样式 > 卫 样 式 > 类 别 样式 > 标记 样式 受到 标记 、 类 和 id 三 种 选择 器 作用 = 
总 的 原则 是 : 越 特殊 的 样式 ,优先 级 越 高 。 示 。 图 4-4 选择 器 层 秋 不 冲突 时 的 样式 
例 代码 如 下 : 
< style type= "text/css"> 
p{ /* 标记 选择 器 * / 
color:blue; /x* 蓝 色 */ 
font- style: italic; /x 斜体 */ } 
.green{ /* 类 选择 器 * / 
color:greeny /x* 绿色 * / } 
‘Purple{ 
color:purple; /x 紫色 < / } 
#red{ /* D 选 择 器 * / 
color:red; /x 红色 x*/ } 
< /style> 


< 户 这 是 第 1 行文 本 < 人 Ap> <!-- 蓝 色 , 所 有 行 都 以 斜体 显示 --> 
<p class= "green"> 这 是 第 2 行文 本 </p> < 上 -绿色 --> 
<Pp class=" green" id "red"> 这 是 第 3 行文 本 </p> < 上 -红色 --> 
<p id "red" style= "color:orange;"> 这 是 第 4 行文 本 </p> <!-- 黄 色 --> 
<p class= "purple green"> 这 是 第 5 行文 本 </p> < 二 -紫色 --> 
由 于 类 选择 器 的 优先 级 比 标记 选择 器 的 优先 级 高 ,而 类 选择 器 中 定义 的 文字 颜色 规 
则 和 标记 选择 器 中 定义 的 发 生 了 冲突 ,因此 被 两 个 选择 器 都 选中 的 第 2 行 p 元 素 将 应 用 
. green 类 选择 器 定义 的 样式 ,而 忽略 p 选择 器 定义 的 规则 ,但 p 选择 器 定义 的 其 他 规则 
还 是 有 效 的 。 因 此 第 2 行 p 元 素 显 示 为 绿色 斜体 的 文字 ; 同 理 , 第 3 行 p 元 素 将 按 优先 级 
高 低 应 用 ID 选择 器 的 样式 ,显示 为 红色 斜体 ;第 4 行 p 元素 将 应 用 行内 样式 ,显示 为 黄色 
斜体 ;第 5 行 p 元 素 同 时 应 用 了 两 个 类 选择 器 class 王 "purple green" ,两 个 选择 器 的 优先 
级 相同 , 则 以 class 属性 中 第 一 个 类 名 对 应 的 选择 器 (. purple) 为 准 , 显 示 为 紫色 斜体 。 
(3) limportant 关键 字 。 
limportant 关键 字 用 来 强制 提升 某 条 声明 的 重要 性 。 如 果 在 不 同 选择 器 中 定义 的 声 
明 发 生 冲 突 ,而 且 某 条 声明 后 带 有 !important, 则 优先 级 规则 为 “!important 盖 行内 样式 二 
ID 样式 二 类 别 样式 二 标记 样式 ”。 对 于 上 例 . 如 果 给 . green 选择 器 中 的 声明 后 添加 
limportant, 则 第 3 行 和 第 5 行文 本 都 会 变 为 绿色 。 在 任何 浏览 器 中 预览 都 是 这 种 效果 。 


.green{ /x* 类 选择 器 * / 


color:greenlimportant; /* 通过 !important 提 升 该 样式 的 优先 级 * / 


} 


如 果 在 同一 个 选择 器 中 定义 了 两 条 相 冲 突 的 规则 ,那么 IE 6 总 是 以 最 后 一 条 为 准 ， 
不 认 !important, 而 Firefox/IE 7 十 以 定义 了 limportant 的 为 准 。 


#box { 
color:red!important; /x* Firefox/ 正 7 以 这 一 条 为 准 * / 
color:bluey /* 正 6 总 是 以 最 后 一 条 为 准 * / 


} 


limportant 用 法 总 结 : 

(1) 在 同一 选择 器 中 定义 的 多 条 样式 发 生 了 冲突 , 则 IE 6 会 忽略 样式 后 的 
limportant 关键 字 , 总 是 以 最 后 定义 的 那 一 条 样式 为 准 ; 

(2) 在 不 同 选择 器 中 定义 的 样式 发 生 冲 突 , 那 么 所 有 浏览 器 都 以 !important 样式 的 
优先 级 为 最 高 。 


4.2.2 CSS 的 继承 性 


CSS 的 继承 性 是 指 如 果子 元 素 定义 的 样式 没有 和 父 元 素 定 义 的 样式 发 生 冲突 ,那么 
子 元 素 将 继承 父 元 素 的 样式 风格 ,并 可 以 在 父 元 素 样式 的 基础 上 再 加 以 修改 ,添加 新 的 样 
式 ,而 子 元 素 的 样式 风格 不 会 影响 父 元 素 。 例 如 ,下 面 代码 的 显示 效果 如 图 4-5 所 示 。 


< style type= "text/css"> 
body { 
text- align: Center7 
font- size: 14px7 
text- decoration: underline; } 
:right{ 
text- align: right; } 
pi{ 
text— decoration:overline; /* 加 上 划 线 * /} 
< /style> 
<h2> 十 二 星座 传说 < /hb2> 
<p><av 白 羊 座 < /em 的 传说 < /p> 
< 户 天 蝎 座 的 传说 < /p> 
<p class= "right"> 双鱼座 的 起 源 < /p> 
说 明 : Css 的 名 承 性 WE 有 TI 


(1) 本 例 中 body 标记 选择 器 定义 的 文本 居中 ,14px 字 
体 、 带 下 划 线 等 属性 都 被 所 有 子 元 素 (h2 和 p) 所 继承 ,因此 前 
三 行 完全 应 用 了 body 定义 的 样式 ,而 且 p 元 素 还 把 它 继承 的 SR 
样式 传递 给 了 子 元 素 em, 但 第 四 行 的 p 元 素 由 于 通过 
“right” 类 选择 器 重新 定义 了 右 对 齐 的 样式 ,所 以 将 覆盖 父 元 

素 body 的 居中 对 齐 , 显 示 为 右 对 齐 。 图 4-5 CSS 的 继承 性 示例 
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(2) 由 于 浏览 器 对 h2 标题 元 素 预 定义 了 默认 样式 ,该 样式 覆盖 了 h2 元 素 继承 的 
过 body 之 标记 选择 器 定义 的 14px 字体 样式 ,结果 显示 为 h2 元 素 的 字体 大 小 , 粗 体 。 可 
见 ,继承 的 样式 比 元 素 的 浏览 器 默认 样式 的 优先 级 还 要 低 。 如 果 要 使 h2 元 素 显示 为 
14px 大 小 ,需要 对 该 元 素 直 接 定义 字体 大 小 以 覆盖 浏览 器 默认 样式 。 

CSS 的 继承 贯穿 整个 CSS 设计 的 始终 ,每 个 标记 都 遵循 着 CSS 继承 的 概念 。 可 以 利 
用 这 种 巧妙 的 继承 关系 ,大 大 缩减 代码 的 编写 量 , 并 提高 可 读 性 ,尤其 在 页 面 内 容 很 多 且 
关系 复杂 的 情况 下 。 例 如 ,如 果 网 页 中 大 部 分 文字 的 字体 大 小 都 是 12px, 我 们 可 以 对 
body 或 td( 若 网 页 用 表格 布局 ) 标 记 定义 字体 样式 为 12px。 这 样 由 于 其 他 标记 都 是 body 
的 子 标 记 , 会 继承 这 一 样式 ,就 不 需要 对 这 么 多 的 子 标记 分 别 定义 样式 了 ,有 些 特殊 的 地 
方 如 果 字 体 大 小 要 求 是 14px, 则 可 以 再 利用 类 选择 器 或 ID 选择 器 对 它们 单独 定义 。 

一 个 HTML 文档 中 元 素 的 继承 关系 可 用 如 图 4-6 所 示 的 文档 对 象 模型 来 描述 。 








body 
title hl p ul 





| i | 
em 1i 上 1i 


图 4-6 文档 对 象 模型 (DOMD) 图 





注意 : 并 不 是 所 有 的 CSS 属性 都 具有 继承 性 ,一 般 是 CSS 的 文本 属性 具有 继承 性 ， 
而 其 他 属性 (如 背景 属性 \ 布 局 属性 等 ) 则 不 具有 继承 性 。 

具有 继承 性 的 属性 大 致 有 : color font-( 以 font 开头 的 属性 ) textrindent ,textralign、 
text-decoration line-height \letter-spacing border-collapse 等 。 

无 继承 性 的 属性 有 : textrdecoration:none\ 所 有 背景 属性 .所 有 盒子 属性 (边框 , 边 
界 .填充 )\ 布 局 属性 (如 float) 等 。 要 注意 的 是 ,text-decoration 属性 设置 为 none 时 不 具 
有 继承 性 ,而 设置 为 其 他 值 时 又 具有 继承 性 。 


4.2.3 选择 器 的 组 合 


每 个 选择 器 都 有 它 的 作用 范围 ,前 面 介绍 的 各 种 基本 选择 器 ,其 作用 范围 都 是 一 个 单 
独 的 集合 ,如 标记 选择 器 的 作用 范围 是 具有 该 标记 的 所 有 元 素 的 集合 ,类 选择 器 的 作用 范 
围 是 自 定义 的 一 类 元 素 的 集合 。 有 时 我 们 希望 对 几 种 选择 器 的 作用 范围 取 交 和 集 、 并 集 、 子 
集 以 选中 需要 的 元 素 , 这 时 就 要 用 到 复合 选择 器 了 , 它 是 通过 对 几 种 基本 选择 器 的 组 合 ， 
实现 更 强 、 更 方便 的 选择 功能 。 

复合 选择 器 就 是 两 个 或 多 个 基本 选择 器 ,通过 不 同方 式 组 合 形成 的 选择 器 ,主要 有 交 
集 选 择 器 、 并 集 选 择 器 和 后 代 选 择 器 。 


1. 交集 选择 器 
交集 选择 器 是 由 两 个 选择 器 直接 连接 构成 ,其 结果 是 选中 两 者 各 自作 用 范围 的 交集 。 
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其 中 第 一 个 必须 是 标记 选择 器 ,第 二 个 必须 是 类 选择 器 或 ID 选择 器 。 例 如 ,hl. clasl; 
p#intro, 这 两 个 选择 器 之 间 不 能 有 空格 。 格 式 如 下 : 


hl.clasl {color: green; font- size:24rx;} 


交集 选择 器 将 选中 同时 满足 前 后 二 者 定义 的 元 素 ,也 就 是 前 者 定义 的 标记 类 型 ,并 且 
指定 了 后 者 类 名 或 ID 的 元 素 。 下 面 的 代码 演示 了 如 何 应 用 交集 选择 器 。 


< style type= "text/css"> 
pl 





color: blue; } 
.Special { 
color: green; } 
p-special { 
color: red; } 
</style> 
<P> 普 通 段落 文本 < /p> < 上 -- 蓝 色 --> 
<h3> 普 通 nb3 标 题 文本 < /h3> 
<p class= "special 必 指定 了 special 类 别 的 段落 文本 < /p> < 上 -红色 --> 
<h3 class= "special"> 指 定 了 special 类 别 的 3 标题 < /hb3> <!-- 绿 色 --> 


上 例 中 过 p 二 标记 选择 器 选中 了 第 一 、 三 行文 本 ;. special 类 选择 器 选中 了 第 三 、 四 行 
文本 ，p. special 选择 器 选中 了 第 三 行文 本 ,是 两 者 的 交集 ,用 于 对 段落 文本 中 的 第 三 行进 
行 特殊 的 控制 。 因 此 第 三 行文 本 显示 为 红色 ,第 一 行 显示 为 蓝 色 ,第 四 行 显示 为 绿色 。 第 
二 行 不 受 这 些 选择 器 的 影响 , 仅 作对 比 。 


2. 并 集 选择 器 


所 谓 并 集 选择 器 ,其 实 就 是 对 多 个 选择 器 进行 集体 声明 ,多 个 选择 器 之 间 用 “," 隔 开 ， 
其 中 每 个 选择 器 都 可 以 是 任意 类 型 的 选择 器 。 如 果 某 些 选择 器 定义 的 样式 完全 相同 ,或 
者 部 分 相同 ,就 可 以 用 并 集 选择 器 同时 声明 这 些 选择 器 完全 相同 或 部 分 相同 的 样式 。 

下 面 的 代码 演示 了 并 集 选择 器 的 作用 。 


< style type= "text/css"> 
hl,h2,h3,p { 
font- size: 12PK7 
background— color:#fod; } 
h2.special, .special,#one { 
text— decoration: underline; } 
</style> 
<hl> 示 例文 字 hl< /hi> 
<h2 class= "special"> 示 例文 字 h2< /h2> 
<ha> 示 例文 字 ha< /h3> 
<h4 id= "one"> 示 例文 字 h4c /h4> 
<p class= "special"> 示 例 段 落 pc /> 


®@__W.,. 页 设计 与 PHP 





五 行 的 元 素 都 变 为 紫色 ,12px 大 小 ,然后 再 对 需要 特殊 设置 的 
第 二 、 四 ,五 行 添加 下 划 线 。 效 果 如 图 4-7 所 示 。 


3. 后代 选 择 器 


在 CSS 选择 器 中 ,还 可 以 通过 肉 套 的 方式 ,对 内 层 的 元 素 
进行 控制 。 例 如 , 当 b 元 素 被 包含 在 a 元素 中 时 ,就 可 以 使 用 
后 代 选 择 器 a b{…} 选 中 出 现在 a 元 素 中 的 b 元 素 。 后 代 选 择 
器 的 写法 是 把 外 层 的 标记 写 在 前 面 ,内 层 的 标记 写 在 后 面 ,之 ”图 和 7 并 集 选择 器 示例 
间 用 空格 隔 开 ,下 面 的 代码 演示 了 后 代 选 择 器 的 作用 。 


< style type= "text/css"> 
af 





font- size: 16px7 
color: red; } 
abl{ 
color: mediunrpurple; } 
</style 
<b> 这 是 b 标 记 中 的 文字 < /b><br /> 
<a hre 伍 嘎 吃 这 是 <b>a 标 记 中 的 kx span> 标 记 < /spar> < />< /a> 


其 中 a 元 素 被 标记 选择 器 a 选中 ,显示 为 16px 红色 字体 ;而 a 元 素 中 的 b 元 素 被 后 


代 选 择 器 a b 选中 ,颜色 被 重新 定义 为 淡 紫 色 ; 第 一 行 的 b 元 素 未 被 任何 选择 器 选中 。 效 
果 如 图 4-8 所 示 。 由 此 可 见 , 后 代 选 择 器 a b{…} 的 选择 范围 如 图 4-9 所 示 。 


文件 到 ) 编辑 EE) 查看 &Y| 
这 是 b 标 记 中 的 文字 
这 是 有 标记 中 的 标记 





图 4-8 后 代 选 择 器 示例 图 4-9 后 代 选 择 器 的 选择 范围 


同 其 他 CSS 选择 器 一 样 ,后 代 选 择 器 定义 的 样式 同样 也 能 被 其 子 元 素 继承 。 例 如 ， 
在 上 例 中 ,b 元素 内 又 包含 了 span 元 素 , 那 么 span 元 素 也 将 显示 为 淡 紫 色 。 这 说 明子 元 
素 (span) 继 承 了 父 元 素 (a b) 的 颜色 样式 。 

后 代 选 择 器 的 使 用 非常 广泛 ,实际 上 不 仅 标 记 选 择 器 可 以 用 这 种 方式 组 合 , 类 选择 器 
和 ID 选择 器 也 都 可 以 进行 骨 套 ,而 且 后 代 选 择 器 还 能 够 进行 多 层 相 套 。 例 如 : 

.special b { color: red } /¥* 应 用 了 类 special 的 元 素 里 面包 含 的 <b> * / 
#menu 1i { pacding: 0 Gpx; } /* 了 D 为 menu 的 元 素 里 面包 含 的 <1i> * / 
tqd.top .banl strong{ font- size: lpx; } ”/* 多 层 嵌 套 ,同样 适用 x*/ 

#menu a:hover b /* 了 攻 为 menu 的 元 素 里 的 a:hover 伪 类 里 包含 的 <b> * / 
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提示 : 选择 器 的 谋 套 在 CSS 的 编写 中 可 以 大 大 减少 对 class 或 id 的 定义 。 因 为 在 构 
建 HTML 框架 时 通常 只 需 给 父 元 素 定义 class 或 id, 子 元 素 能 通过 后 代 选 择 器 选择 的 ， 
则 利用 这 种 方式 ,而 不 需要 再 定义 新 的 class 或 id。 
4. 复合 选择 器 的 优先 级 
复合 选择 器 的 优先 级 比 组 成 它 的 单个 选择 器 的 优先 级 都 要 高 。 我 们 知道 ,基本 选择 
器 的 优先 级 是 “ID 选择 器 二 类 选择 器 二 标记 选择 器 ”", 所 以 不 妨 设 ID 选择 器 的 优先 级 权 
重 是 100, 类 选择 器 的 优先 级 权重 是 10 ,标记 选择 器 的 优先 级 权重 是 1, 那 么 复合 选择 器 
的 优先 级 就 是 组 成 它 的 各 个 选择 器 权重 值 的 和 。 例 如 : 





hl{color:red;} /* 权重 =1* / 
p em{color:blue;} /* 权重 =2* / 
.warning{color:yellow;} /* 权重 =10* / 
Pp:note em.dark{color:gray;} /* 权重 =22* / 
#main{color:black;} /* 权重 =100* / 


当权 重 值 一 样 时 ,会 采用 “ 层 生 原则 ”, 一 般 后 定义 的 会 被 应 用 。 
下 面 是 复合 选择 器 优先 级 计算 的 一 个 例子 。 
< style type= "text/css"> 
#aau li{ color:red } 
-aa{ color:blue } 
< /style> 
<div idF "aa"> 
<u><1i class= "aa"> 
Css 常见 问题 之 <em class= "aa"> 复 合 选择 器 < /ez 的 优先 级 
</1i> 
</u>< /div> 


对 于 去 li 一 标记 中 的 内 容 , 它 同时 被 “# aa ul li 和 *“. aa” 两 个 选择 器 选中 ,由 于 #aa ul 
li 的 优先 级 为 102 ,而 . aa 的 优先 级 为 10, 所 以 1 中 的 内 容 将 应 用 #aa ulli 定 义 的 规则 , 文 
字 为 红色 ,如 果 和 希望 文字 为 蓝 色 ,可 提高 .aa 的 特殊 性 ,将 其 改写 成 #aa ul li. aa”。 

另外 ,代码 中 em 元 素 内 的 文字 颜色 为 蓝 色 ,因为 直接 作用 于 em 元 素 的 选择 器 只 
“. aa” ,虽然 em 也 会 继承 “#aa ul li 选择 器 的 样式 ,但 是 继承 的 样式 优先 级 最 低 ,会 被 类 
选择 器 *. aa” 定 义 的 样式 所 覆盖 。 

综 上 所 述 ,CSS 样式 的 优先 级 如 图 4-10 所 示 。 

其 中 ,浏览 器 对 标记 预定 义 的 样式 是 指 对 于 某 些 HTML 标记 ,浏览 器 预先 对 其 定义 
了 默认 的 CSS 样式 ,如 果 用 户 没 重新 定义 样式 ,那么 浏览 器 将 按 其 定义 的 默认 样式 显示 ， 
常见 的 标记 在 标准 浏览 器 (如 Firefox) 中 默认 样式 如 下 : 

body { margin: Spx; line height: 1.]2em } 

hl { font- size: 2em; margin: .67em 0 } 

h2 { font- size: 1.5em; margin: .75em 0 } 
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h3 { font- size: 1.17em margin: -83em 0 } 

h4，Pprblockouote ul,fieldset, formmol, dl, dir,menu { margin: 1.12em 0 } 
hl, h2, h3, h4,h5, hé, b,strong { font- weight: bolger } 

blockouote { margin left: 40px; margin right: 40px } 

pre {white- space: pre } 





高 limportant 样 式 
行内 样式 
优先 级 ye 复合 选择 器 
标记 选择 器 | 
浏览 器 对 标记 预定 义 的 样式 
低 继承 的 样式 


图 4-10 CSS 样式 的 优先 级 



























































有 些 元 素 的 预定 义 ( 默 认 ) 的 样式 在 不 同 的 浏览 器 中 区 别 很 大 ,例如 ,ul、ol 和 dd 等 列 
表 元 素 ,IE 中 的 默认 样式 是 : 


wolddfmargin- left:40px;} 

而 Firefox 中 的 默认 样式 定义 为 : 

Woldd {padding- Jeft:40px;} 

因此 ,要 清除 列表 的 默认 样式 ,一 般 可 以 设置 : 


uv ol da { 
list- style- type:none; /x* 清除 列表 项 目 符号 x* / 
margin:0; /x* 清除 正 左 缩 进 * / 
Padding:0; /* 清除 非 正 左 缩 进 * / 


} 


4.2.4 CSS 2.1 新 增 选择 器 简介 


上 面 介绍 的 一 些 基本 选择 器 和 复合 选择 器 都 是 CSS 1. 0 中 就 已 具有 的 选择 器 ,它们 
能 被 日 前 所 有 的 浏览 器 所 支持 。CSS 2. 1 标准 在 1.0 的 基础 上 增加 了 一 些 新 的 选择 器 ， 
这 些 选择 器 不 能 被 IE 6 浏览 器 支持 ,但 是 其 他 浏览 器 (如 IE 7 十 、Firefox、Safari 等 ) 均 对 
它们 提供 支持 ,考虑 到 大 多 数 计算 机 都 安装 了 IE 7 十 等 新 型 浏览 器 ,预计 IE 6 将 在 一 两 
年 内 被 淘汰 ,因此 我 们 有 必要 知道 这 些 新 选择 器 ,它们 能 给 CSS 设计 带 来 方便 ,而 且 对 以 
后 学 习 jQuery 的 选择 器 也 是 很 有 帮助 的 。 


1. 子 选 择 器 
子 选择 器 用 于 选中 元 素 的 直接 后 代 ( 即 儿子 ), 它 的 定义 符号 是 大 于 号 (二 ) ,例如 : 


body>p { 
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color: green; } 
<body> 
< 户 这 一 段 文字 是 绿色 < /p> 
<div>< 户 这 一 段 文字 不 是 绿色 < /p>< /div> 
< 户 这 一 段 文 字 是 绿色 < /E> 
< /body> 
只 有 第 一 个 和 第 三 个 段落 的 文字 会 变 绿色 ,因为 它们 是 body 元 素 的 直接 后 代 , 所 以 
被 选中 。 而 第 二 个 p 元 素 是 body 的 间接 后 代 , 不 会 被 选中 ,如 果 把 (body 之 p) 改 为 后 代 
选择 器 (body p) ,那么 三 个 段落 都 会 被 选中 。 这 就 是 子 选 择 器 和 后 代 选 择 器 的 区 别 。 后 
代 选 择 器 选中 任何 后 代 。 


2. 相 邻 选择 器 


相 邻 adjacent-sibling) 选 择 器 是 另 一 个 有 趣 的 选择 器 , 它 的 定义 符号 是 加 号 (十 ), 相 
邻 选择 器 将 选中 紧 跟 在 它 后 面 的 一 个 兄弟 元 素 (这 两 个 元 素 具 有 共同 的 父 元 素 )。 例 如 : 


h2rp{ 
color: red; } 
<h2> 下 面 哪些 文字 是 红色 的 呢 < /h2> 
< 户 这 一 段 文字 是 红色 < /p> 
< 户 这 一 段 文字 不 是 红色 < /p> 


<h2> 下 面 有 文字 是 红色 的 吗 < /hb2> 

<div>< 户 这 一 段 文 字 不 是 红色 < /p>< /div> <!--div 中 的 p 和 h2 不 同 级 ,不 会 被 选中 - -> 
< 户 这 一 段 文 字 不 是 红色 </p> ”<!-- 没 有 紧 跟 在 2 后 ,不 会 被 选中 -一 > 

<h2> 下 面 哪些 文字 是 红色 的 呢 < /2> 


这 一 段 文字 不 是 红色 

< 户 这 一 段 文字 是 红色 < /p> 

< 户 这 一 段 文字 不 是 的 < /p> 

第 一 个 段落 标记 紧 跟 在 h2 之 后 ,因此 会 被 选中 ,在 最 后 一 个 h2 元 素 后 ,尽管 紧 接 的 
是 一 段 文字 。 但 那些 文字 不 属于 任何 标记 ,因此 紧 随 这 些 文字 之 后 的 第 一 个 p 元 素 也 会 
被 选中 。 

如 果 希 望 紧 跟 在 h2 后 面 的 任何 元 素 都 变 成 红色 ,可 使 用 如 下 方法 ， 


hb2+ < { 
color: red; } 


那么 第 二 个 h2 后 的 div 元 素 也 会 被 选中 。 
3. 属性 选择 器 


引入 属性 选择 器 后 ,CSS 变 得 更 加 复杂 、 准 确 、 功 能 强大 。 属 性 选择 器 主要 有 三 种 形 
式 , 分 别 是 匹配 属性 匹配 属性 和 值 .匹配 属性 和 值 的 一 部 分 。 属 性 选择 器 的 定义 方式 是 
将 属性 和 值 写 在 方 括号 ([ ]) 内 。 
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1) 匹配 属性 

属性 选择 器 选中 具有 某 个 指定 属性 的 元 素 ,例如 : 

a[name] {color:purple; } /* 选中 具有 name 属 性 的 a 元 素 * / 

img [border] {border- color:gray;} /x* 选中 具有 border 属 性 的 img 元 素 * / 
[special] {color:red;} /* 选中 具有 special 属性 的 任何 元 素 * / 


在 这 些 情况 下 ,每 个 元 素 的 具体 属性 值 并 不 重要 ,只 要 给 定 属 性 在 元 素 中 出 现 ,元 素 
便 匹 配 该 属性 选择 器 ,还 可 给 元 素 自 定义 一 个 它 没有 的 属性 名 ,如 (二 h2 ”special 一 ”全 
… 过 /h2 记 ) ,那么 这 个 h2 元 素 会 被 [special] 属 性 选择 器 选中 ,这 时 属性 选择 器 就 起 到 类 


或 ID 选择 器 的 作用 了 。 
2) 匹配 属性 和 值 
属性 选择 器 也 可 根据 元 素 具 有 的 属性 和 值 来 匹配 ,例如 : 
afhref= "http://www.hyru.an"] {color:yellow;} /x* 选中 指向 www-hynu.cn 的 链接 * / 
input [type= "sutmit"] {background:purple;} /* 选中 表单 中 的 提交 按钮 * / 


img[alt= "Sony Iogo"] [class= "pic"] {margin:20px;} ”/* 同时 匹配 两 个 属性 和 值 * / 


这 样 , 用 属性 选择 器 就 能 很 容易 地 选中 某 个 特定 的 元 素 ,而 不 用 为 这 个 特定 的 元 素 定 
义 一 个 ID 或 类 ,再 用 ID 或 类 选择 器 去 匹配 它 了 。 

3) 匹配 单个 属性 值 

如 果 一 个 属性 的 属性 值 有 多 个 ,每 个 属性 值 用 空格 分 开 , 那 么 就 可 以 用 匹配 单个 属性 
值 的 属性 选择 器 来 选中 它们 了 。 它 是 在 等 号 前 加 了 一 个 波浪 符 (一 )。 例 如 : 

[special~ = "wo"] {color: red;} 

<h2 special= "wo shi"> 文 字 是 红色 < /h2> 

由 于 对 一 个 元 素 可 指定 多 个 类 名 ,匹配 单个 属性 值 的 选择 器 就 可 以 选中 具有 某 个 类 
名 的 元 素 ,这 才 是 它 的 主要 用 途 。 例 如 : 


h2[class~ ="two"] {color: red;} 
<h2 class= "one two three"> 文 字 是 红色 < /h2> 


4. 新 增加 的 伪 类 选择 器 


在 IE6 中 ,只 支持 二 a 二 标记 的 四 个 伪 类 , 即 a:link、a:visited、a:hover 和 a:active, 其 
中 前 两 个 称 为 链接 伪 类 ,后 两 个 是 动态 伪 类 。 在 CSS 2. 1 规范 中 ,任何 元 素 都 支持 动态 伪 
类 ,所 以 像 li:hover img:hover div:hover 和 p:hover 这 些 伪 类 是 合法 的 ,它们 都 能 被 IE 





7 和 其 他 浏览 器 支持 。 
下 面 介 绍 两 种 新 增加 的 伪 类 选择 器 , 即 : focus 和 :first-child。 
1) :focus 
:focus 用 于 定义 元 素 获得 焦点 时 的 样式 。 例 如 ,对 于 一 个 表单 来 说 , 当 光 标 移动 到 某 


个 文本 框 内 时 (通常 是 单 击 了 该 文本 框 或 使 用 Tab 键 切 换 到 了 这 个 文本 框 上 ), 这 个 
input 元 素 就 获得 了 焦点 。 因 此 ,可 以 通过 input:focus 伪 类 选中 它 ,改变 它 的 背景 色 ,使 
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它 突 出 显示 ,代码 如 下 : 

input:focus { background: yellow; } 

对 于 不 支持 : focus 伪 类 的 IE 6 浏览 器 ,要 模拟 这 种 效果 ,只 能 使 用 两 个 事件 结合 
JavaScript 代码 来 模拟 ,它们 是 onfocus( 获 得 焦点 ) 和 onblur( 失 去 焦点 ) 事 件 。 

) :first-child 

:first-child 伪 类 选择 器 用 于 匹配 它 的 父 元 素 的 第 一 个 子 元 素 , 也 就 是 说 这 个 元 素 是 
它 父 元 素 的 第 一 个 儿子 ,而 不 管 它 的 父 元 素 是 哪个 。 例 如 : 


p:first- hild{ font- weight: bolgd; } 

<body> 

< 户 这 一 段 文 字 是 粗 体 < /p> < 上 -第 1 行 ,被 选中 --> 

<h2> 下 面 哪些 文字 是 粗 体 的 呢 < /h2> 

< 户 这 一 段 文字 不 是 粗 体 < /p> 

<h2> 下 面 哪些 文字 是 粗 体 的 呢 < /2> 

<div><E 这 一 段 文字 是 粗 体 < /p> < 上 -第 5 行 ,被 选中 --> 

< 户 这 一 段 文字 不 是 粗 体 < /p>< /div> 

<div> 下 面 哪些 文字 是 粗 体 的 呢 

这 一 段 文字 不 是 

< 户 这 一 段 文 字 是 粗 体 < /p> < 上 -第 9 行 ,被 选中 --> 

< 户 这 一 段 文字 不 是 的 < /p>< /div> 

< /body> 

这 段 文字 共有 3 行 会 以 粗 体 显示 。 第 1 行 p 是 其 父 元 素 body 的 第 一 个 儿子 ,被 选 
中 ;第 5 行 p 是 父 元 素 div 的 第 一 个 儿子 ,被 选中 ,第 9 行 p 也 是 父 元 素 div 的 第 一 个 儿 
子 , 也 被 选中 ,尽管 它 前 面 还 有 一 些 文字 ,但 那 不 是 元 素 。 


5. 伪 对 象 选 择 器 


在 CSS 中 伪 对 象 选择 器 主要 有 :first-letter、 :first-line 以 及 :before 和 :after。 之 所 以 
称 :first-letter 和 :first-line 是 伪 对 象 ,是 因为 它们 在 效果 上 使 文档 中 产生 了 一 个 临时 的 
元 素 , 这 是 应 用 “虚构 标记 ”的 一 个 典型 实例 。 
) :first-letter 
:first-letter 用 于 选中 元 素 内 容 中 的 首 个 字符 , :firstline 用 于 选中 元 素 内 容 中 的 首 
文本 。 不 管 元 素 显 示 的 区 域 是 宽 还 是 窗 , 样 式 都 会 准确 地 应 用 于 首 行 。 如 果 段 落 的 首 
三 只 有 5 个 汉字 , 则 只 有 这 5 个 汉字 会 应 用 样式 。 如 果 首 行 包含 30 个 汉字 ,那么 这 30 个 

汉字 都 会 应 用 样式 。 下 面 是 一 个 p 元 素 的 CSS 代码 ,其 显示 效果 如 图 4-11 所 示 。 


车 


Pi:first- letter { font- size: 2em; float: left; } 
p:first— line { font- weight: bold; letter- spacing: 0.3emz } 
< 户 春 天 来 临 ,又 到 了 播种 耕种 的 季节 ,新 皇后 将 炒 熟 了 的 麦子 ……< /p> 
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[Bfirst-letter 和 first— line - e211 =|OIxl 


文件 人 编辑 人 E) 查看 WW 历史 @) 书签 @) 工具 加) 





春天 来 临 ， 又 到 了 播种 耕种 的 季节 ， 
和 发 送 给 全 | 不 和 请 
农夫 。 已 经 熟 透 了 的 南 子 ， 无 论 怎样 浇 水 、 
当然 都 无 法 发 出 芽 来 。 

















图 4-11 :firstletter 和 :firstline 的 应 用 


注意 : 

(1) 可 供 :first-line 使 用 的 CSS 属性 有 一 些 限制 , 它 只 能 使 用 字体 、 文 本 和 背景 属性 ， 
不 能 使 用 盒子 模型 属性 (如 边框 背景) 和 布局 属性 。 

(2) 如 果 在 :first-letter 或 ;first-line 与 “{” 之 间 有 空格 , 则 IE 6 也 能 支持 这 两 种 选 
择 器 。 

) :before 和 :after 

:before 和 :after 两 个 伪 对 象 必须 配合 content 属性 使 用 才 有 意义 。 它 们 的 作用 是 在 
指定 的 元 素 内 产生 一 个 新 的 行内 元 素 ,该 行内 元 素 的 内 容 是 由 content 属性 里 的 内 容 决 
定 。 例 如 ,下 面 代码 的 效果 如 图 4-12 所 示 。 

<style> 

p:before, p:after{oontent: "-—"; oolor:red;} 

</style> 

< 户 看 这 一 段 文 字 的 左右 < /p> 

< 户 这 一 段 文字 左右 < /> 

可 以 看 到 ,通过 产生 内 容 属 性 ,p 元 素 的 左边 和 右边 都 添加 了 一 个 新 的 行内 元 素 , 它 
们 的 内 容 是 "--", 并 且 设 置 伪 元 素 内 容 的 样式 红色 。 

还 可 以 将 :before 和 :after 伪 元 素 转 化 为 块 级 元 素 显示 ,例如 将 上 述 选择 器 修改 为 : 


p:before,p:after{content: "-— "; color:red; display:block;} 


显示 效果 如 图 4-13 所 示 。 利 用 :after 产生 的 伪 元 素 , 常 被 用 来 作为 清除 浮动 的 元 素 ,这 
样 就 不 需要 在 浮动 元 素 后 添加 一 个 空 元 素 了 。 具 体 请 参考 4. 6. 3 节 相 关内 容 。 


before 和 after 伪 对 千里 [=]EE3 
文件 中 编辑 到 ) 查看 W) 历史 | 
一 看 这 一 段 文 字 的 左右 一 到 


一 这 一 段 文字 左右 一 











before 和 after 擅 对 各 车 [=|EE 





图 4-12 用 :before 和 :after 配合 图 4-13 设置 伪 元 素 为 块 级 
content 添加 伪 元 素 元 素 显 示 的 效果 


6. CSS 2. 1 选择 器 总 结 
下 面 将 常用 的 CSS 2. 1 选择 器 罗列 在 表 4-3 中 ,请 读者 掌握 它们 的 用 法 。 
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表 4-3 CSS 2.1 常用 的 选择 器 
























































选择 器 名 称 选择 器 示例 作用 范围 
通 配 选 择 符 关 所 有 的 元 素 
标记 选择 器 div 所 有 过 div 之 标记 的 元 素 
div” 去 div 之 标记 中 所 有 的 子 元 素 
后 代 选 择 器 div span 包含 在 一 div 之 标记 中 的 span 元 素 
div . class 包含 在 二 div 之 标记 中 类 名 属性 为 class 的 元 素 
并 集 选 择 器 div, span div 元 素 和 span 元 素 
子 选 择 器 * div>span 如 果 span 元 素 是 div 元 素 的 直接 后 代 , 则 选中 span 元 素 
相 邻 选择 器 ” div 十 span 如 果 span 元 素 紧 跟 在 div 元 素 后 , 则 选中 span 元 素 
类 选择 器 ,class 所 有 类 名 属性 为 class 的 元 素 
交集 选择 器 div. class 所 有 类 名 属性 为 class 的 div 元 素 
让 # itemid ID 名 为 itemid 的 唯一 元 素 
div# itemid ID 名 为 itemid 的 唯一 div 元 素 
a[attr] 具有 attr 属性 的 a 元 素 
属性 选择 器 * a[attr='x] 具有 attr 属性 并 且 值 为 x 的 a 元 素 
a[attr 一 一 sx] 具有 attr 属性 并 且 值 的 字符 中 含有 x 的 a 元 素 
a:hover 所 有 在 hover 状态 下 的 a 元 素 
a. class: hover 所 有 在 hover 状态 下 具有 class 类 名 的 a 元素 
伪 对 象 选择 器 ” | div:first-letter | 选中 div 元 素 中 的 第 一 个 字符 








4.3 CSS 设计 和 书写 技巧 * 


4.3.1 CSS 样式 总 体 设 计 原 则 


设计 CSS 样式 时 ,应 遵循 “ 先 普遍 、 后 特别 ”的 原则 。 首 先 对 很 多 元 素 统一 设置 属性 ， 
然后 为 一 些 需 要 特别 设置 样式 的 元 素 添加 class 属性 或 ID 属性 ,并 注意 如 下 几 点 : 

(1) 善于 运用 后 代 选 择 器 。 虽 然 定义 标记 选择 器 最 方便 (不 需要 在 每 个 标记 中 添加 
class 或 ID 属性 ,使 初学 者 最 喜欢 定义 标记 选择 器 或 由 标记 选择 器 组 成 的 后 代 选 择 器 )， 
但 有 些 标记 在 网 页 文档 的 各 部 分 出 现 的 含义 不 同 ,从 而 样式 风格 往往 也 不 相同 ,例如 ,网 
页 中 普通 的 文字 链接 和 导航 链接 的 样式 就 不 同 。 为 此 ,虽然 可 以 将 导航 条 内 的 各 个 二 a 二 
标记 都 定义 为 同一 个 类 ,但 这 样 导 航 条 内 的 所 有 二 a 二 标记 都 得 添加 一 个 class 属性 ,class 一 
"nav" 要 重复 写 很 多 遍 。 例 如 


<div> 


<a class= "nav" hre 全 只 喧 首 页 </a> 
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<a class= "nav" hre 伍 绊 吃 中 心 简介 < /a>… 
<a class= "nav" hre 全 哗 喧 技术 支持 </a></div> 
实际 上 ,可 以 为 导航 条 内 二 a 二 标记 的 父 标记 (如 ul) 添 加 一 个 ID 属性 (nav) ,然后 用 
后 代 选 择 器 (#nav a) 就 可 以 选中 导航 条 内 的 各 个 二 a 二 标记 了 。 这 时 HTML 结构 代码 
中 的 ID="nav" 就 只 要 写 一 次 了 ,示例 代码 如 下 ,显然 这 样 代 码 更 简洁 。 





<div ic "nav™> 
<ahre 全 只 性 首 页 < /a> 
<a hreE- 中 心中 心 简介 < /ay… 
<ahref= 啡 吃 技 术 支 持 < /a>< /div> 
(2) 灵活 运用 class 和 ID。 
例如 ,网 页 中 有 很 多 栏目 框 ,所 有 栏目 框 有 许多 样式 是 相同 的 ,因此 可 以 将 所 有 栏目 
框 都 定义 为 同一 个 类 ,然后 再 对 每 个 栏目 框 定义 一 个 ID 属性 ,以 便 对 某 个 栏目 框 作 特别 
的 样式 设置 。 
(3) 对 于 几 个 不 同 的 选择 器 ,如 果 它 们 有 一 些 共同 的 样式 声明 ,就 可 以 先 用 并 集 选择 
器 对 它们 集体 声明 ,然后 再 单独 定义 某 些 选择 器 的 特殊 样式 以 覆盖 前 面 的 样式 。 如 : 


h2,h3,h4,p, fom, ul {margin:0;font— size:14rx;} 
h2{font- size:18px;} 


4.3.2 Dreamweaver 对 CSS 的 可 视 化 编辑 支持 
1. 新 建 和 编辑 CSS 样式 


Dreamweaver 对 CSS 代码 的 新 建 和 编辑 有 很 好 的 支持 ,对 CSS 的 所 有 操作 都 集中 在 
如 图 4-14 中 所 示 的 “CSS 样式 ”面板 中 , 单 击 “ 新 建 CSS 规则 ” 
按钮 (本 ) ,就 会 弹出 如 图 4-15 所 示 的 对 话 框 : 

其 中 “选择 器 类 型 "中 的 “类 ”对 应 类 选择 器 ,“ 标 签 ” 对 应 标 
记 选 择 器 ,“ 高 级 ”对 应 除 此 之 外 的 其 他 所 有 选择 器 (如 ID 选择 
器 , 伪 类 选择 器 和 各 种 复合 选择 器 ) 。 确 定 选 择 器 类 型 后 ,就 可 
以 在 “名 称 ” 下 拉 列 表 框 中 输入 或 选择 选择 器 的 名 称 ( 要 注意 符 
合 选择 器 的 命名 规范 , 即 类 选择 器 必须 以 点 开头 ,ID 选择 器 必 
须 以 # 开 头 ) ,在 “定义 在 ?选项 中 ,可 以 选择 将 CSS 代码 写 在 外 
部 CSS 文件 中 (如 style. css) ,并 通过 链接 式 引 入 该 CSS 文档 ; 
“ 仅 对 该 文档 ”表示 使 用 嵌入 式 引入 CSS, 即 把 CSS 代码 作为 一 style 之 标记 的 内 容 写 在 文 

定义 好 选择 器 后 , 单 击 * 确 定 ? 按 钮 ,就 会 弹出 该 选择 器 的 CSS 属性 面板 ,如 图 4-16 所 
示 。 所 有 选择 器 的 CSS 属性 面板 都 是 相同 的 。 

对 面板 中 任何 一 项 进行 赋值 后 ,都 等 价 于 往 该 选择 器 中 添加 一 条 声明 ,如 下 划 线 设置 
为 “无 ”, 就 相当 于 在 代码 视图 内 为 该 选择 器 添加 了 一 条 “text-decoration: none;”。 








到 
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图 4-16 CSS 属性 面板 


设置 完 样式 属性 后 , 单 击 “ 应 用 ”按钮 ,可 以 在 设计 视图 中 看 到 样式 应 用 后 的 效果 ,也 
可 单 击 “ 确 定 ” 按 钮 ,将 关闭 规则 定义 面板 并 应 用 样式 。 这 时 在 “CSS 样式 ?面板 中 将 出 现 
刚才 新 建 的 CSS 选择 器 名 称 和 其 属性 ,如 图 4-14 所 示 。 


2. 将 能 入 式 CSS 转换 为 外 部 CSS 文件 


如 果 在 HTML 文档 头 部 已 经 用 二 style 之 标记 添加 了 一 段 嵌 入 式 的 CSS 代码 ,可 以 
将 这 段 代码 导出 成 一 个 CSS 文件 , 供 多 个 HTML 文档 引用 。 导 出 方法 有 以 下 两 种 : 

(1) 执行 “文本 ”>“CSS 样式 ”>“ 导 出 ”菜单 命令 ,输入 文件 名 (如 style. css) ,就 可 将 
该 段 CSS 代码 导出 成 一 个 .css 文件 。 导 出 后 可 将 此 文档 中 的 二 style 二 标记 部 分 全 部 删 
除 ,然后 再 单 击 图 4-14 中 的 “附加 样式 表 ” 按 钮 ( 畏 |) .将 刚才 导出 的 . css 文件 引入 ,引入 
的 方法 可 选择 “链接 ”或 “导入 ”, 分 别 对 应 链接 式 CSS 或 导入 式 CSS。 

(2) 直接 复制 CSS 代码 。 在 DW 中 新 建 一 个 CSS 文件 ,将 二 style 二 标记 中 的 所 有 样 
式 规则 (不 包括 二 style 二 标记 和 注释 符 ) 剪 切 到 CSS 文档 中 ,然后 青 单 击 “ 附 加 样式 表 ” 按 
钮 ( 国 |) 将 这 个 CSS 文件 导入 。 


3. Dreamweaver 对 CSS 样式 的 代码 提示 功能 


Dreamweaver 对 CSS 同样 具有 很 好 的 代码 提示 功能 。 在 代码 视图 中 编写 CSS 代码 
时 , 按 Enter 键 或 空格 键 都 可 以 触发 代码 提示 。 
编辑 CSS 代码 时 ,在 一 条 声明 书写 结束 的 地 方 按 Enter 键 , 就 会 弹出 该 选择 器 拥有 
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的 所 有 CSS 属性 列表 供 选择 ,如 图 4-17 所 示 。 当 在 属性 列表 框 中 已 选 定 某 个 CSS 属性 
后 ,又 会 立刻 弹出 属性 值 列表 框 供 选择 ,如 图 4-18 所 示 。 如 果 属 性 值 是 颜色 , 则 会 弹出 颜 
色 选 取 框 ;如 果 属 性 值 是 URL, 则 会 弹出 文件 选择 框 。 








margin: 0px 20px 


margin: Opx 20px 
float 








图 4-17 按 回 车 后 提示 属性 名 称 图 4-18 ”选择 名 称 后 提示 属性 值 


如 果 要 修改 某 个 CSS 属性 的 值 ,只 需 把 冒号 和 属性 值 删除 ,然后 输入 一 个 冒号 ,就 又 
会 弹出 如 图 4-18 所 示 的 属性 值 列 表 框 来 。 


4. 在 代码 视图 中 快速 新 建 选择 器 和 修改 选择 器 


在 代码 视图 中 ,如 果 将 光标 移动 到 某 个 标记 的 标记 范围 内 ( 尖 括 号 内 ), 如 图 4-19 所 
示 。 再 单 击 图 4-14 中 CSS 样式 面板 中 的 “新 建 ? 按 钮 四, 则 在 弹出 如 图 4-20 所 示 的 “新 建 
CSS 规则 ?对 话 框 中 ,会 自动 为 光标 所 在 位 置 的 元 素 建 立 选 择 器 名 ,这 样 可 免 去 手工 书写 
该 CSS 选择 器 的 名 称 的 麻烦 。 


4-8-17zindex 导 航 条 . htnl 





图 4-19 将 光标 置 于 标记 范围 内 图 4-20 ”新建 选择 器 时 会 自动 出 现 光标 位 置 的 元 素 


如 果 要 修改 某 个 CSS 选择 器 的 样式 ,可 将 光标 置 于 这 个 CSS 选择 器 的 代码 范围 内 ， 
再 单 击 如 图 4-14 所 示 *CSS 样式 ”面板 中 的 “编辑 样式 "按钮 加 ,就 会 弹出 该 选择 器 的 规则 
定义 面板 ( 见 图 4-16) 供 修改 。 

4.3.3 CSS 属性 的 值 和 单位 


值 是 对 属性 的 具体 描述 ,而 单位 是 值 的 基础 。 没 有 单位 ,浏览 器 将 不 知道 一 个 边框 是 
l0cm 还 是 10px。CSS 中 较 复杂 的 值 和 单位 有 颜色 取 值 和 长 度 单位 。 





1. 颜色 的 值 


CSS 中 定义 颜色 的 值 可 使 用 命名 颜色 、RGB 颜色 和 十 六 进 制 颜色 三 种 方法 。 
1) 命名 颜色 
例如 : 
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p{ color: red; } 


其 中 red 就 是 命名 颜色 ,能 够 被 CSS 识别 的 颜色 名 大 约 有 140 种 。 常 见 的 颜色 名 如 red、 
yellow .blue silver teal .white .navy .orchid ,oliver .purple .green 等 。 

2) RGB 颜色 

显示 器 的 成 像 原理 是 红 (Red)、 绿 (Green)、 蓝 (Blue) 三 色光 的 释 加 形成 各 种 各 样 的 
色彩 。 因 此 ,通过 设 定 RGB 三 色 的 值 来 描述 颜色 是 最 直接 的 方法 。 格 式 如 下 : 


tda{ color: rgb(139,31,185); } 
td{ color: rgb(12% ,201,50% ); } 


其 值 可 以 取 0 一 255 之 间 的 整数 ,也 可 以 是 0 一 100 儿 的 百分数 ,但 Firefox 浏览 器 并 
不 支持 百分数 值 。 

3) 十 六 进 制 颜色 

十 六 进 制 颜色 的 使 用 最 普遍 ,其 原理 同样 是 RGB 色 ,不 过 将 RGB 颜色 的 数值 转换 成 
了 十 六 进 制 的 数字 ,并 用 更 加 简单 的 方式 写 出 来 : #RRGGBB, 如 #ffcc33。 

其 参数 取 值 范围 为 : 00 一 FF( 对 应 十 进 制 仍 为 0 一 255) ,如 果 每 个 参数 各 自在 两 位 上 
的 数值 相同 ,那么 该 值 也 可 缩写 成 “#RGB” 的 方式 。 例 如 ,#ffcc33 可 以 缩写 为 #fc3。 


2. CSS 长 度 单位 


为 了 正确 显示 网 页 中 的 元 素 , 许 多 CSS 属性 都 依赖 于 长 度 。 所 有 长 度 都 可 以 为 正 数 
或 者 负数 加 上 一 个 单位 来 表示 ,而 长 度 单位 大 致 可 分 为 三 类 : 绝对 单位 、 相 对 单位 和 百 
分 比 。 

1) 绝对 单位 

绝对 单位 很 简单 ,包括 英寸 (in) 、 厘 米 (cm) 、 毫 米 (mm) \ 磅 (pt) 和 pica(pc)。 

使 用 绝对 单位 定义 的 长 度 在 任何 显示 器 中 显示 的 大 小 都 是 相同 的 ,不 管 该 显示 器 的 
分 辨 率 或 尺寸 是 多 少 。 如 font-size:9pt, 则 该 文字 在 任何 显示 器 中 都 是 9 磅 大 小 。 在 手 
机 网 页 中 ,由 于 不 同类 型 的 手机 分 辨 率 相差 很 大 ,应 尽量 使 用 绝对 单位 。 

2) 相对 单位 

顾名思义 ,相对 单位 的 长 短 取 决 于 某 个 参照 物 , 如 屏幕 的 分 辩 率 .字体 高 度 等 。 

有 3 种 相对 长 度 单 位 : 元 素 的 字体 高 度 (em) .字母 x 的 高 度 (ex) 和 像素 (px) 。 

(1) em 就 是 元 素 原 来 给 定 的 字体 font-size 的 值 ,如 果 元 素 原 来 给 定 的 font-size 值 是 
14px, 那 么 lem 就 是 14px。 

(2) ex 是 以 字体 中 小 写 x 字母 为 基准 的 单位 ,不 同 的 字体 有 不 同 的 x 高度 ,因此 即使 
font-size 相同 而 字体 不 同 的 话 ,1ex 的 高 度 也 会 不 同 。 

(3) 像素 px 是 指 显 示 器 按 分 辨 率 分 割 得 到 的 小 点 。 显 示 器 由 于 分 辨 率 或 大 小 不 同 ， 
像素 点 的 大 小 是 不 同 的 ,所 以 像素 也 是 相对 单位 。 

3) 百分比 

百分比 显得 非常 简单 ,也 可 看 成 是 一 个 相对 量 。 如 : 


tdffont- size:12px; line-height: 160%8; }] ”/* 设 定 行 高 为 字体 高 度 的 160% * / 


®@_W.. 准 网 页 设计 与 PHP 


hr{ width: 80%} /* 水 平 线 宽度 相对 其 父 元 素 宽 度 为 808 * / 





4.4 盒子 模型 及 标准 流下 的 定位 


在 网 页 的 布局 和 页 面 元 素 的 表现 方面 ,要 掌握 的 最 重要 的 概念 是 CSS 的 盒子 模型 
(Box Model) 以 及 盒子 在 浏览 器 中 的 排列 (定位 ) ,这 些 概念 用 来 控制 元 素 在 页 面 上 的 排 
列 和 显示 方式 ,形成 CSS 的 基本 布局 。 

设想 有 4 幅 杀 嵌 在 画 框 中 的 画 , 如 图 4-21 所 示 。 我 们 可 以 把 这 4 幅 画 看 成 是 4 个 
img 元 素 ,那么 img 元 素 中 的 内 容 就 是 画 框 中 的 画 , 画 (内 容 ) 和 边框 之 间 的 距离 称 为 盒子 
的 填充 或 内 边 距 (padding) , 画 的 边框 称 为 盒子 的 边框 (border) , 画 的 边框 周围 还 有 一 层 
边界 (margin) ,用 来 控制 元 素 盒子 与 其 他 元 素 盒子 之 间 的 距离 。 





border 


padding 














图 4-21 夯 框 示意 图 


4.4.1 盒子 模型 基础 


通过 对 画 框 中 的 画 进行 抽象 ,就 得 到 一 个 抽象 的 模型 一 一 盒子 模型 ,如 图 4-22 所 示 。 
盒子 模型 是 CSS 的 基石 之 一 , 它 指定 元 素 如 何 显示 以 及 (在 某 种 程度 上 ) 如 何 相互 交互 ， 
页 面 上 的 每 个 元 素 都 被 浏览 器 看 成 是 一 个 矩形 的 盒子 ,这 个 盒子 由 元 素 的 内 容 、 填 充 、 边 
框 和 边界 组 成 。 网 页 就 是 由 许多 个 盒子 通过 不 同 的 排列 方式 (上 下 排列 ,左右 排列 、. 嵌 套 
排列 ?堆积 而 成 。 


1. 盒子 模型 的 属性 和 计算 


盒子 的 概念 是 非常 容易 理解 的 ,但 是 如 果 要 精确 地 利用 盒子 模型 布局 ,有 时 候 1 像素 
都 不 能 够 差 ,这 就 需要 非常 精确 地 理解 盒子 大 小 的 计算 方法 。 盒 子 模型 的 填充 .边框 , 边 
界 宽度 都 可 以 通过 相应 的 属性 分 别 设置 上 、 右 、 下 、 左 四 个 距离 的 值 ,内 容 区 域 的 宽度 可 通 
过 width 和 height 属性 设置 ,增加 填充 、 边 框 和 边界 不 会 影响 内 容 区 域 的 尺寸 ,但 会 增加 
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图 4-22 盒子 模型 及 有 关 属 性 


盒子 的 总 尺寸 。 
因此 一 个 元 素 盒子 的 实际 宽度 如 下 : 
实际 宽度 = 左边 界 十 左边 框 十 左 填充 十 内 容 宽度 十 右 填充 十 右边 框 十 右边 界 
例如 ,一 个 div 元 素 的 CSS 样式 定义 如 下 : 








div{ 
background: #9cf; 
margin: 20px; 
border: 10px solid #039; 
Padding: 40px; 
width: 200px; 
height:88pxy } 
<div> 盒 子 模型 < /div> 
则 该 元 素 占据 的 网 页 总 宽度 是 : 20 二 10 十 40 十 200 十 40 十 10 十 20 王 340(px)。 其 中 ,该 元 
素 内 容 占据 的 宽度 是 200px, 高 度 是 88px。 
由 于 默认 情况 下 绝 大 多 数 元 素 的 盒子 边框 宽度 是 0, 盒 子 的 背景 是 透明 的 ,所 以 在 不 
设置 CSS 样式 的 情况 下 元 素 的 盒子 不 可 见 , 但 这 些 盒子 依然 是 占据 网 页 空间 的 。 
通过 CSS 重新 定义 元 素 样式 ,我 们 可 以 分 别 设置 元 素 盒 子 的 margin .padding 和 
border 的 宽度 值 , 还 可 以 设置 盒子 边框 和 背景 的 颜色 ,巧妙 设置 可 以 美化 网 页 元 素 。 











2. 边框 border 属性 


盒子 模型 的 margin 和 padding 属性 比较 简单 ,只 能 设置 宽度 值 ,最 多 分 别 对 上 、 右 、 
下 \ 左 分 别 设置 宽度 值 。 而 边框 border 则 可 以 设置 边框 的 宽度 .颜色 和 样式 。border 属 
性 有 3 个 子 属 性 ,分别 是 border-width( 宽 度 ) .border-color( 颜 色 ) 和 border-style( 样 式 ) 。 
在 设置 border 时 常常 需要 将 这 3 个 属性 结合 起 来 才能 达到 良好 的 效果 。 
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边框 设置 为 实 线 (solid) 、 虚 线 (dashed)、 点 划 线 文件 四 坊 辑 中 查看 ”| 链接 | 导 
(dotted) 、 双 线 (double) 等 ,效果 如 图 4-23 所 示 。 = 
各 种 样式 边框 的 显示 效果 在 IE 和 Firefox rr | 
The border-style of dashed. 
中 略 有 区 别 。 对 于 groove、inset、outset 和 ridge be ede 一 
这 4 种 值 ,IE 都 不 支持 。 下 面 是 图 4-23 对 应 的 De hor de TL 
代码 。 


可 以 


这 里 重点 讲解 border-style 属性 , 它 可 以 将 
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图 4-23 边框 样式 (border-style 属性 ) 
的 不 同 取 值 的 效果 


< style type= "text/css"> 
divt{ 
border: 6px black; 
margin: px; 
Padding: 6px; } 
< /style> 
<div style= "border- style:solid"> The border- style of solid.< /div> 
< div style= "border- style:dashed"> The border- style of dashed.< /div> 
<div style= "border- style:dotted"> The border- style of dotted.< /div> 
<div style= "border- style:double"> The border- style of double.< /div> 


我 们 还 可 以 分 别 对 某 个 边框 设置 样式 ,下 面 是 一 些 例子 ,其 显示 效果 如 图 4-24 所 示 。 


border: drx solid red; /x* 同时 设置 4 个 边框 * / 
/x* ----------------------------- 一 */ 

border- bottam: 6px double black; /# 单独 设置 下 边框 为 黑色 双 线 * / 
/x* ------------------------------ x*/ 

border:3px dotted #00f; 

border- right:noney /x* 设置 右边 无 边框 ,其 他 边框 为 虚线 * / 
/x*------------------------------ 关 / 

border:5px dashed #666; 

border- width:0 Spx; /x* 设 置 上 下 无 边框 */ 


I | 疏 :内 
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图 4-24 边框 样式 的 设置 效果 








提示 : 当 有 多 条 规则 作用 于 同一 个 边框 时 , 则 后 面 设置 的 样式 会 覆盖 前 面 的 设置 。 
实际 上 ,边框 border 属性 有 个 有 趣 的 特点 , 即 两 条 交会 的 边框 之 间 是 一 个 斜 角 ,我 们 
通过 为 边框 设置 不 同 的 颜色 ,再 利用 这 个 斜 角 , 制 作出 像 三 角形 一 样 的 效果 。 例 如 


图 4-25 ,第 一 个 元 素 将 四 条 边框 设置 为 不 同 的 颜色 ,并 设置 为 10 像素 宽 , 此 时 可 明显 地 


看 到 


边框 交会 处 的 斜 角 ;第 二 个 元 素 在 第 一 个 元 素 基 础 上 将 元 素 的 内 容 设 置 为 空 ,这 时 由 


于 没有 内 容 , 四 条 边框 紧 挨 在 一 起 ,形成 四 个 三 角形 的 效果 。 第 三 个 元 素 和 第 四 个 元 素 的 
内 容 也 为 空 , 第 三 个 元 素 将 左边 框 设置 为 白色 ,下 边框 设置 为 红色 (当然 也 可 设置 上 边框 


为 白色 ,右边 框 为 红色 ,效果 一 样 )。 第 四 个 元 素 将 左右 边框 设置 为 白色 ,下 边框 设置 为 红 
色 , 并 且 左 右边 框 宽度 是 下 边框 的 一 半 。 





作 缺 角 的 导航 条 中 再 详细 讨论 。 
3. 填充 padding 属性 


填充 padding 属性 也 称 为 盒子 的 内 边 距 。 位 于 盒子 的 边框 和 内 容 之 间 , 和 表格 的 填 
充 属性 (cellpadding) 相 似 。 如 果 填 充 属 性 为 0, 则 
盒子 的 边框 会 紧 挨 着 内 容 , 这 样 通常 不 美观 。 

当 对 盒子 设置 了 背景 颜色 或 背景 图 像 后 , 那 
么 背景 会 覆盖 padding 和 内 容 组 成 的 区 域 ,并且 默 
认 情 况 下 背景 图 像 是 以 padding 的 左上 角 为 基准 
点 在 盒子 中 平 铺 的 ,如 图 4-26 所 示 。 


4. 边界 margin 属性 





图 4-26 背景 图 像 覆 盖 padding 区 域 


边界 margin 位 于 盒子 边框 的 外 侧 ,也 称 为 外 边 距 。 甚 不 会 应 用 背景 ,因此 该 区 域 总 
是 透明 的 。 通 过 设置 margin, 可 以 使 盒子 与 盒子 之 间 留 有 一 定 的 间距 ,而 使 页 面 不 至 于 
过 于 拥挤 。 可 以 统一 设置 4 个 边界 的 宽度 ,也 可 单独 设置 各 边界 的 宽 。 例 如 : 


margin: rx px; /* 上 下 pw 左右 8px* / 
margin- left: - 10px; /* 左边 界 -1l0pxx / 


5. 盒子 模型 属性 缩写 技巧 


CSS 缩写 是 指 将 多 条 CSS 属性 集合 写 到 一 行 中 的 编写 方式 ,通过 对 盒子 模型 属性 的 
缩写 ,可 大 大 减少 CSS 代码 ,使 代码 更 清晰 ,主要 的 缩写 方式 有 : 

1) 盒子 边界 .填充 或 边框 宽度 的 缩写 

(1) 对 于 盒子 margin .padding 和 border-width 的 宽度 值 ,如 果 只 写 一 个 值 , 则 表示 
它 四 周 的 宽度 相等 ,例如 ,p{margin: 0px)} 。 

如 果 给 出 了 2 个 、3 个 或 者 4 个 属性 值 ,它们 的 含义 将 有 所 区 别 , 具 体 含义 如 下 : 

(2) 如 果 给 出 2 个 属性 值 ,那么 前 者 表示 上 下 边 距 的 宽度 ,后 者 表示 左右 边框 的 
宽度 ; 
(3) 如 果 给 出 3 个 属性 值 , 那 么 前 者 表示 上 边 距 的 宽度 ,中 间 的 数值 表示 左右 边框 的 
宽度 ,后 者 表示 下 边 距 的 宽度 ; 
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(4) 如 果 给 出 4 个 属性 值 ,依次 表示 上 、 右 \ 下 左边 距 的 宽度 , 即 按 顺 时 针 排 序 。 

2) 边框 border 属性 的 缩写 

边框 border 是 一 个 复杂 的 对 象 , 它 可 以 设置 4 条 边 的 不 同 宽度 .不 同 颜色 以 及 不 同 
样式 ,所 以 border 属性 提供 的 缩写 形式 也 更 为 丰富 。 不 仅 可 以 对 整个 属性 进行 缩写 ,也 
可 以 对 单个 边 进行 缩写 。 对 于 整个 属性 的 缩写 形式 如 下 : 





border: border- width | border- style | border- color 
例如 ,下 面 的 代码 将 所 有 div 元 素 的 4 条 边 均 设 置 为 1px 宽 , 实 线 、 蓝 色 边 框 样式 。 
div{border : lpx solid blue; } 
如 果 要 为 4 条 边 定义 不 同 的 样式 , 则 可 以 缩写 如 下 : 
p{ border- width:lpx px 3px px; /x 上 右 下 左 */ 
border- color:white blue red; jx 上 左右 下 */ 
border- style: solid dashed; /x 上 下 左右 * / 
} 
如 果 要 单独 对 某 一 条 边 的 某 个 属性 进行 设置 , 则 可 以 这 样 写 ， 


border- right- color:red; /* 设置 右边 框 为 红色 x* / 
border- top- width: dpx; /* 设置 上 边框 宽度 为 4 像素 * / 


6. 盒子 模型 其 他 需 注意 的 问题 


关于 盒子 模型 ,还 有 以 下 几 点 需要 注意 : 

(1) 边界 margin 值 可 为 负 , 如 margin: 一 480px, 填 充 padding 值 不 可 为 负 。 

(2) 如 果 盒 子 中 没有 内 容 ( 即 空 元 素 , 如 二 div 之 一 /div 二 ) ,对 它 设 置 的 宽度 或 高 度 为 
百分比 单位 (如 width:30%) ,而 且 没 有 设置 border、padding 或 margin 值 , 则 盒子 不 会 被 
显示 ,也 不 会 占据 空间 ,但 是 如 果 对 空 元 素 的 盒子 设置 的 宽 或 高 是 像素 值 的 话 ,盒子 会 按 
照 指定 的 像素 值 大 小 显示 。 

(3) 对 于 IE 6 浏览 器 ,如 果 网 页 头 部 没有 定义 文档 类 型 声明 DOCTYPE, 或 定义 不 
正确 (最 常见 的 是 DOCTYPE 没有 写 在 HTML 文档 的 第 一 行 ) ,那么 IE 6 将 进入 怪异 
(quirk) 模 式 , 此 时 盒子 的 宽度 width 或 高 度 height 等 于 原来 的 宽度 或 高 度 再 加 上 填充 值 
和 边框 值 。 因 此 ,在 使 用 了 盒子 模型 属性 后 ,一定 要 有 文档 类 型 声明 。 


7. 各 种 元 素 盒子 模型 属性 的 浏览 器 黑 认 值 


所 谓 浏览 器 的 默认 样式 就 是 指 不 设置 任何 CSS 样式 的 情况 下 浏览 器 对 元 素 样式 的 
定义 ,例如 ,对 于 标题 元 素 ,浏览 器 默认 会 以 粗 体 的 形式 显示 ,我 们 对 元 素 定 义 CSS 样式 ， 
实际 上 就 是 覆盖 浏览 器 对 元 素 默认 的 样式 定义 。 各 种 元 素 的 浏览 器 的 默认 样式 如 下 : 

(1) 绝 大 多 数 html 元 素 的 margin . padding 和 border 属性 浏览 器 默认 值 为 0; 

(2) 有 少数 html 元 素 的 margin 和 padding 浏览 器 默认 值 不 为 0。 主要 有 body、 
hl-h6、p、ul\li\form 等 ,因此 有 时 必须 重新 定义 它们 的 这 些 属性 值 为 0。 
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(3) 表单 中 大 部 分 input 元 素 ( 如 文本 框 、 按 钮 ) 的 边框 属性 默认 不 为 0, 有 时 可 以 对 
input 元 素 边框 值 进 行 重新 定义 ,以 达到 美化 表单 中 文本 框 和 按钮 的 目的 。 


4.4.2 盒子 模型 的 应 用 


学 习 了 盒子 模型 以 后 ,我 们 可 以 为 网 页 中 的 任何 元 素 添加 填充 ,边框 和 背景 等 效果 ， 


只 要 运用 得 当 , 能 很 方便 地 美化 网 页 。 


模型 的 运用 技巧 。 
1. 美化 表单 


下 面 以 美化 表单 和 制作 特殊 效果 表格 来 展示 盒子 


网 页 中 的 表单 控件 在 默认 情况 下 背景 都 是 灰色 的 ,文本 框 边 框 是 粗 线条 带 立 体感 的 ， 
不 够 美观 。 下 列 代码 (4-1. html) 通 过 CSS 改变 表单 的 边框 样式 .颜色 和 背景 颜色 让 文本 
框 ,按钮 等 变 得 漂亮 些 ,效果 如 图 4-27 所 示 。 


< style type= "text/css"> 
fom{ 

border: lpx dotted #999; 

Padding: lpx Grx; 

margin: 0; 

font:14px Arial; } 
irput{ 

Color: #00008B; 
irput.txt{ 

background- color: #fee; 

border:none; 


border- bottam: lpx solid #266980; 


color: #1D5061;} 
input.btn{ 
CDlor: #00008B; 
background- color: #ADD8E6; 
border: lpx outset #00008B; 
padding: 3px rx lpx; 
} 
select{ 
width: 100px; 
Color: #00008B; 
background- color: #ADD8E6; 
border: lpx solid #00008B; 
} 
textarea{ 
width: 200pz; 
height: 40px; 
color: #00008B; 
background- color: #ADD8E6; 


/* 设置 fom 元 素 边框 为 点 线 * / 


/* 清除 fomm 元 素 的 默认 边界 值 * / 


/* 对 所 有 input 标 记 设 置 统一 的 文本 颜色 * /} 


/* 文 本 框 单独 设置 * / 


/* 先 清除 文本 框 的 边框 * / 
/设置 文本 框 下 边框 的 样式 * / 


/* 按钮 单独 设置 * / 


/* 设置 下 拉 框 样式 * / 


/* 设置 多 行文 本 域 样式 * / 
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border: lrx inset #00008B; } 
</style> 
< fom action= "" method= "post"> 
< 户 用 户 名 :<input class= "txt" type= "text" name= "comments" size= 15/> < /p> 
< 户 密 码 :< input class= "txt" name= "passwd" type= "password" size= "15" /> 
< 人 位 
<g 户 所 在 地 : < select name= "addr"> 
< cption value= 四 必 湖南 < /option> 
<cption value= "2"> 广 东 < /option> 
< cption value= "3"> 江 苏 < /option> 
< cption value="4"> 四 川 < /option>< /select>< /p> 
< 本 个 性 签名 :<br/>< textarea name= "sign" cols= "20" rows="4"> < /textarea> 
</p 
< < input class= "btn" type= "submit" value= " 登 录 " /> 
< input class= "btn" type= "reset" value=" 重 置 " />< /p> 
</form 


在 上 述 代码 中 ,使 用 input. txt 选中 了 类 名 为 txt 文本 框 ,对 于 支持 属性 选择 器 的 浏 
览 器 来 说 ,还 可 以 使 用 inputLtype= "text"] 来 选中 文本 框 ,这 样 就 不 需要 添加 类 名 。 可 以 
看 到 ,美化 表单 主要 就 是 重新 定义 表单 元 素 的 边框 和 背景 色 等 属性 ,对 于 Firefox 来 说 ， 
还 可 以 为 表单 元 素 定义 背景 图 像 (background-image) ,但 IE 不 支持 。 


2. 制作 1px 带 虚线 边框 表格 


通过 CSS 盒子 模型 的 边框 属性 可 以 很 容易 地 制作 出 如 图 4-28 所 示 的 1px 虚线 边框 
的 表格 。 方 法 是 首先 在 把 表格 的 HTML 边框 属性 设置 为 0, 然后 给 表格 table 用 CSS 添 
加 1px 的 实 线 边框 ,再 给 第 一 行 的 单元 格 td 用 CSS 添加 虚线 的 下 边框 。 为 了 让 单元 格 
的 虚线 和 边框 和 表格 的 边框 不 交合 ,设置 表格 的 间距 (cellspacing) 不 为 0 即 可 。 代 码 
如 下 : 











电子 商务 专业 的 学 生 
应 掌握 基本 网 页 设计 和 制作 
技能 。 因 为 以 后 要 接触 到 大 
量 的 修改 网 页 的 工作 ， 至少 
应 该 为 以 后 工作 打下 一 个 良 
好 的 基础 。 




















图 4-27 CSS 美 化 表单 效果 图 4-28 ”CSS 虚线 边框 表格 


< style type= "text/css"> 
table { 
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border: lrx solid #03F; 上 
td.title { 
border- bottom: lpx dashed #06f; } 
</style> 
< table width= "168" border= "0" oellpadding= "3" cellspacing= "8"> 
<tr><ta class= "title"> 课 程 简介 < /to>< /tr> 
<tr><td class= "test"> 电 子 商 务 专业 …*…< /to>< /tr> 
< /table> 


4.4.3 盒子 在 标准 流下 的 定位 原则 


CSS 中 有 三 种 基本 的 定位 机 制 , 即 标准 流 C(normal flow) 浮动 (float) 和 定位 属性 下 
的 定位 。 除 非 设置 了 浮动 属性 或 定位 属性 ,否则 所 有 盒子 都 是 在 标准 流 中 定位 的 。 

顾名思义 ,标准 流 中 元 素 盒 子 的 位 置 由 元 素 在 HTML 中 的 位 置 决定 。 也 就 是 说 , 行 
内 元 素 的 盒子 在 同一 行 中 水 平 排列 ; 块 级 元 素 的 盒子 占据 一 整 行 ,从 上 到 下 一 个 接 一 个 排 
列 ; 盒 子 可 以 按照 HTML 元 素 的 舱 套 方式 包含 其 子 元 素 的 盒子 ,盒子 与 盒子 之 间 的 距离 
由 margin 和 padding 决定 。 在 网 页 中 添加 一 个 HTML 元 素 也 就 是 向 浏览 器 中 插入 了 一 
个 合 巴 。 

例如 ,下 列 代码 中 有 一 些 行内 元 素 和 块 级 元 素 , 其 中 块 级 元 素 p 还 机 套 在 div 块 内 。 
下 面 采用 * ”选择 器 让 网 页 中 所 有 元 素 显 示 ”* 盒 子 ” ,效果 如 图 4-29 所 示 。 


<html><head> 
< style type= "text/css"> 
* {border: 2px dashed #FF0066; 
Padding: px; 
margin: 2px;} 
body{ border: 3px solid blue;} 
af border: 3px dotted blue;} 
< /style> < /head> 
<body> 
<diw> 网 页 的 banner( 块 级 元 素 )< /div> 
<ahre 全 嘎 必 行内 元 素 1< /a> <a hre 全 嘎 必 行内 2< /a><a hre 人 中 性 行内 x /a> 
<diw> 这 是 无 名 块 < 户 这 是 盒子 中 的 盒子 < /p>< /div>< /body>< /hbm> 


在 图 中 ,最 外 面 的 虚线 框 是 html 元 素 的 盒子 ,里 面 “EECUUOEECOEEEI 
的 一 个 实 线 框 是 body 元 素 的 盒子 。 在 body 中 ,包括 两 [EGG 要 二 OO 万 和 
个 块 级 元 素 (div) 从 上 到 下 排列 ,和 三 个 行内 元 素 (a) 从 - 
左 到 右 并 列 排列 ,还 有 一 个 p 元 素 盒子 嵌 套 在 div 盒子 
中 ,所 有 盒子 之 间 的 距离 由 margin 和 padding 值 控 制 。 





1. 行内 元 素 的 盒子 





行内 元 素 的 盒子 永远 只 能 在 浏览 器 中 得 到 一 行 高 度 图 4-29 盒子 在 标准 流下 的 定位 
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的 空间 ( 行 高 由 line-height 属性 决定 ,如 果 没 设置 该 属性 , 则 是 内 容 的 默认 高 度 ) ,如 果 给 
它 设置 上 下 border margin padding 等 值 ,导致 其 盒子 
的 高 度 超过 行 高 ,那么 盒子 上 下 部 分 将 和 其 他 元 素 的 
盒子 重 肥 ,如 图 4-29 所 示 。 

从 图 4-30 可 以 看 出 , 当 增 加 a 元 素 的 边框 和 填充 
值 时 ,行内 元 素 a 占据 的 浏览 器 高 度 并 没有 增加 ,下 面 
这 个 div 块 仍 然 在 原来 的 位 置 , 导 致 行内 元 素 盒子 的 
上 下 部 分 和 其 他 元 素 的 盒子 发 生 重 肆 ( 此 时 a 元 素 的 
盒子 将 释放 在 其 他 盒子 上 方 ), 而 左右 部 分 不 会 受 影 图 430 增 大 a 元 素 的 高 度 后 效果 
响 。 因 此 ,不 推荐 对 行内 元 素 直 接 设置 盒子 属性 ,一般 
先 设 置 行内 元 素 以 块 级 元 素 显 示 ,再 对 它 设 置 盒子 属性 。 
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2. display 属性 


实际 上 ,标准 流 中 的 元 素 可 通过 display 属性 来 改变 元 素 是 以 行内 元 素 显示 还 是 以 块 
级 元 素 显示 ,或 不 显示 。display 属性 的 常用 取 值 如 下 : 


display: block | inline | none | list- item 


display 设置 为 block 表示 为 以 块 级 元 素 显示 ,设置 为 inline 表示 以 行内 元 素 显 示 , 将 
display 设置 为 其 他 两 项 的 作用 如 下 : 

1) 隐藏 元 素 (display:none;) 

当 某 个 元 素 被 设置 成 display:none; 之 后 ,浏览 器 会 完全 忽略 掉 这 个 元 素 ,该 元 素 将 
不 会 被 显示 ,也 不 会 占据 文档 中 的 位 置 。 像 title 元 素 默 认 就 是 此 类 型 。 在 制作 下 拉 菜 
单 .Tab 面板 时 就 需要 用 display: none 把 未 激活 的 菜单 或 面板 隐藏 起 来 。 

提示 : 使 用 visibility:hidden 也 可 以 隐藏 元 素 , 但 元 素 仍 然 会 占据 文档 中 原来 的 
位 置 。 

2) 列表 项 元 素 (display:list-item;) 

在 html 中 只 有 1i 元素 默 认 是 此 类 型 ,将 元 素 设置 为 列表 项 元 素 并 设置 它 的 列表 样式 
后 元 素 左边 将 增加 列表 图 标 ( 如 小 黑 点 ) 。 

修改 元 素 的 display 属性 一 般 有 以 下 用 途 : 

。 让 一 个 inline 元 素 从 新 行 开 始 (display:block;); 

。 控制 inline 元 素 的 宽度 和 高 度 (对 导航 条 特别 有 用 ) (display:block;); 

。 无 须 设 定 宽度 即 可 为 一 个 块 元 素 设 定 与 文字 同 宽 的 背景 色 (display:inline; ) 。 


3. 上 下 margin 合并 问题 


上 下 margin 合并 是 指 当 两 个 块 级 元 素 上 下 排列 时 ,它们 之 间 的 边界 (margin) 将 发 生 
合并 ,也 就 是 说 ,两 个 盒子 边框 之 间 的 距离 等 于 这 两 个 盒子 margin 值 的 较 大 者 。 如 图 4-31 
所 示 ,浏览 器 中 两 个 块 元 素 将 会 由 于 margin 合并 按 右 图 方式 显示 。 


合并 之 前 


上 下 外 过 上 全 并 
oo 


一 个 外 边 距 
LL #2 


图 4-31 上 下 margin 合并 


margin-top: 10px 





元 素 上 下 margin 合并 的 一 个 例子 是 由 几 个 段落 (p 元 素 ) 组 成 的 典型 文本 页 面 ,第 一 
个 p 元 素 上 面 的 空白 等 于 段落 p 和 段落 p 之 间 的 空白 宽度 。 这 说 明了 段落 之 间 的 上 下 
margin 发 生 了 合并 ,从 而 使 段落 各 处 的 距离 相等 了 。 


4. 父子 元 素 空 白 边 琶 加 问题 
当 一 个 元 素 包 含 在 其 父 元 素 中 时 , 若 父 元 素 的 边框 和 填充 为 0, 此 时 父 元 素 和 子 元 素 


的 margin 挨 在 一 起 ,那么 父 元 素 的 上 下 margin 会 和 子 元 素 的 上 下 margin 发 生 合并 ,但 
是 左右 margin 不 会 发 生 合并 现象 ,如 图 4-32 所 示 。 


合并 之 前 合并 之 后 








内 外 边 距 合并 
成 一 个 外 边 距 


| " 





图 4-32 父子 元 素 空 白 边 合并 
下 面 的 代码 是 一 个 上 下 margin 合并 的 例子 , 它 的 显示 效果 如 图 4-33 所 示 。 


< style type= "text/css"> 
#inner { 
margin: 30px; 
height: 50px; width: 200px; 
background— color: #99CCFF7 
border: lrx solid #FF0000; } 
#outer { 
margin: 20px; /* 父 元 素 只 设置 了 边界 , 没 设置 边框 和 填充 * / 
body { margin: 10px; } 
</style> 
<body> 
<div ji 中 "outer><div id "inner> 此 处 显示 。” ia "inner" 的 内 容 </div>< /div> 
< /body> 
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在 图 4-33 中 ,由 于 父 元 素 没有 设置 边框 和 填充 值 ,使 父 元 素 和 子 元 素 的 上 下 margin 
发 生 了 合并 ,而 左右 margin 并 未 合并 。 如 果 有 多 个 父 元 素 的 边框 和 填充 值 都 为 0, 那 么 
子 元 素 会 和 多 个 父 元素 的 上 下 margin 发 生 合 并 。 因 此 在 上 例 中 , 上 margin 等 于 
##inner、#outer、body 三 个 元 素 上 margin 的 最 大 值 30px。 

若 父 元 素 的 边框 或 填充 不 为 0, 或 父 元 素 中 还 有 其 他 内 容 , 那 么 父 元 素 和 子 元 素 的 
margin 会 被 分 隔 开 ,因此 不 存在 margin 合并 的 问题 。 

提示 : 如 果 有 盒子 谱 套 ,要 调整 外 面 盒子 和 里 面 盒子 之 间 的 距离 ,尽量 用 外 面 盒 子 的 
padding 来 调整 ,不 要 用 里 面 盒 子 的 margin, 以 避免 父子 元 素 上 下 margin 合并 现象 发 生 。 





5. 左右 margin 不 会 合 


元 素 的 左右 margin 等 于 相 邻 两 边 的 margin 之 和 ,不 会 发 生 合 并 ,如 图 4-34 所 示 。 


margin-left margin-right 





图 4-33 父子 元 素 上 下 空白 边 释 加 图 图 4-34 行内 元 素 的 左右 margin 不 会 合 


6. 其 套 盒 子 在 IE 和 Firefox 中 的 不 同 显示 


当 一 个 块 级 元 素 包 含 在 另 一 个 块 级 元 素 中 时 , 若 对 父 块 设置 高 度 , 但 父 块 的 高 度 不 足 
以 容纳 子 块 时 ,IE 将 使 父 块 的 高 度 自 动 伸展 ,达到 能 容纳 子 块 的 最 小 高 度 为 止 。 而 
Firefox 对 父 块 和 子 块 均 以 定义 的 高 度 为 准 , 父 块 高 度 不 会 伸展 , 任 其 子 块 露 在 外 面 , 子 块 
高 度 也 不 会 压缩 。 如 图 4-35 所 示 ,其 对 应 的 代码 如 下 。 


























图 4-35 设置 父 元 素 和 子 元 素 高 度 后 在 IE( 左 ) 和 Firefox( 右 ) 中 的 显示 效果 


#outer #inner { 
background- color: #90baff; 
margin: Srx; padding:10px; 
height:60rx; 
font- size:24px; font- weight:bold; 
border: lrx dashed red; } 
#outer { 
border: lrx solid #333; 
Padding: @px; 
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height:50px; 

background- color: #ff9; 下 
</style> 
<div idF "outer"> 

<div id= "inner"> 标 准 流 中 的 嵌 套 盒子 < /div> 
</div> 


从 这 里 可 以 看 出 ,Firefox 对 元 素 的 高 度 解释 严格 按照 我 们 设 定 的 高 度 执行 ,而 IE 对 
元 素 高 度 的 设 定 有 点 自作 主张 的 味道 , 它 总 是 使 标准 流 中 子 元 素 的 盒子 包含 在 父 元素 盒 
子 当 中 。 从 CSS 标准 规范 来 说 ,IE 这 种 处 理 方式 是 不 符合 规范 的 , 它 这 种 方式 本 应 该 由 
min-height( 最 小 高 度 ) 属 性 来 承担 。 

提示 : CSS2 规范 中 有 4 个 相关 属性 min-height、max-height、min-width、max-width， 
分 别 用 于 设置 最 大 .最 小 高 度 和 宽度 ,IE 6 不 支持 这 4 个 属性 ,而 IE 7、Firefox 等 浏览 器 
都 能 很 好 地 支持 它们 。 


7. 标准 流下 定位 的 应 用 一 一 制作 竖 直 导航 菜单 


利用 盒子 模型 及 其 在 标准 流 中 的 定位 方式 ,就 可 以 制作 出 无 须 表 格 的 竖 直 菜单 ,原理 
是 通过 将 a 元素 设置 为 块 级 元 素 显示 ,并 设置 它 的 宽度 ,再 添加 填充 、 边 框 和 边 距 等 属性 
实现 的 。 当 鼠标 滑 过 时 改变 它 的 背景 和 文字 颜色 以 实现 动态 交互 。 代 码 如 下 ,效果 如 
图 4-36 所 示 。 


#nava { 
font- size: 14pxy color: #333; 
text- decoration: none; 
background- color: #coc; 
display: block; 
width:140px; 
Padding: GE 10Fx x; 
border: lpx solid black; 
margin: 2rx; } 
#nav a:hover { 
color: White; 
background- color: #666; } 
<div id "nav> 
<ahre 伍 叶 吃 首 页 </a><ahre 人 三 嘎 > 中 心 简介 < /a> 
<ahre 伍 叶 吃 政策 法 规 </a><a hre 伍 叶 心 常用 下 载 < /a> 
<ahre 伍 嘲 吃 为 您 服务 </a><a hre 伍 哇 吃 技术 支持 和 服务 < /a> 
< /div> 





图 4-36 竖 直 导航 菜单 


4.5 背景 的 控制 


背景 (background) 是 网 页 中 常用 的 一 种 表现 方法 ,无 论 是 背景 颜色 还 是 背景 图 片 , 只 
要 灵活 运用 都 能 为 网 页 带 来 丰富 的 视觉 效果 。 
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4.5.1 CSS 的 背景 属性 


很 多 HTML 元 素 ( 如 table、td) 都 具有 bgcolor 和 background 等 HTML 属性 ,可 以 
用 来 设置 背景 颜色 和 背景 图 片 , 但 形式 比较 单一 。 对 背景 图 片 的 设 定 , 只 支持 在 X 轴 和 
YY 轴 都 平 铺 的 方式 。 因 此 ,如 果 同 时 设置 了 背景 颜色 和 背景 图 片 ,而 背景 图 片 又 不 透明 ， 
那么 背景 颜色 将 被 背景 图 片 完全 挡住 ,只 显示 背景 图 片 。 

而 CSS 对 元 素 的 背景 设置 , 则 提供 了 更 灵活 的 方式 ,如 背景 图 片 既 可 以 平 铺 也 可 以 
不 平 铺 , 还 可 以 仅 在 X 轴 平 铺 或 仅 在 Y 轴 平 铺 , 当 背景 图 片 不 平 铺 时 ,并 不 会 完全 挡住 背 
景 颜色 ,因此 可 以 同时 设置 背景 颜色 和 背景 图 片 ,将 两 者 有 机 地 融合 在 一 起 。 

CSS 的 背景 属性 是 background, 或 以 *background-” 开 头 , 表 4-4 列 出 了 CSS 的 背景 














属性 及 其 可 能 的 取 值 。 
表 44 CSS 的 背景 属性 及 其 取 值 
属 性 措 述 可 用 什 
| rt hss 其 他 背景 属性 可 用 值 的 集合 
Dae 设置 背景 颜色 命名 颜色 ,十 六 进 制 颜色 等 
background-image 设置 背景 图 片 url(URL) 
background-repeat | 设置 至 景 图 片 的 平 销 方式 ne ee ei 





background-attachment 


设置 背景 图 片 固定 还 是 随 内 容 滚 动 scroll ,fixed 





background-position 





设置 背景 图 片 显 示 的 起 始 位 置 (第 一 个 
值 为 水 平 位 置 ,第 二 个 值 为 竖 直 位 置 ) 


[left | center | right] [top | center| 
bottomj 或 [x%] [y%] 或 [x-pos] 
[ypos] 





background 属性 是 所 有 背景 属性 的 缩写 形式 ,5 种 背景 属性 的 缩写 顺序 为 ; 


background: background- color | | backoround- image | | backoround- repeat | | backorcund- attachment | | 


background- position 


例如 : 


body {background:silver Url (images/bg5.jpg) repeat- x fixed 50% 50%;} 


可 以 省 略 其 中 一 个 或 多 个 属性 值 ,如 省 略 , 那 么 该 属性 将 使 用 浏览 器 默认 值 ,默认 值 为 : 


。 background-color: transparent 


。 background-image: none 


。 background-repeat: repeat 


。 background-attachment: scroll 
。 background-position: 0% 0% 


说 明 : 


/* 背景 颜色 透明 * / 

/* 无 背景 图 片 * / 

/* 背景 默认 完全 平 铺 */ 
/* 随 内 容 滚 动 */ 

/* 从 左上 角 开 始 定位 */ 


(1) background-repeat 属性 值 可 设置 为 不 平 铺 (no-repeat) 水 平平 铺 (repeat-x) 、 垂 
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直 平 铺 (repeat-y) 和 完全 平 铺 (repeat) ,其 中 repeat-x 和 repeat-y 的 效果 如 图 4-37 所 示 。 


(2) background-position( 背 景 定 位 ) 属 性 值 单位 中 百分数 和 像素 的 意义 不 同 ,使 用 百 
分 数 定位 时 ,是 将 背景 图 片 的 百分比 位 置 和 元 素 盒子 的 百分比 位 置 对 齐 。 例 如 : 


<div style= "width:100px;height:100px;background:ur] (hua.gif) no- repeat 50%33%;"> < /div> 
就 表示 将 背景 图 片 的 水 平 50% 处 和 div 盒子 的 水 平 50% 处 对 齐 , 竖 直方 向 33% 处 和 盒子 
的 竖 直方 向 33% 处 对 齐 。 这 样 背景 图 片 将 位 于 盒子 的 水 平 中 央 ( 相 当 于 设置 为 center)， 
垂直 方向 约 1/3 处 。 而 如 果 设 置 为 像素 , 则 表示 相对 于 盒子 的 左边 缘 或 上 边缘 (边框 内 
侧 ) 偏 移 指 定 的 距离 。 图 4-38 对 这 两 种 属性 值 单 位 进行 了 对 比 。 


AAA 1 : 二 | 1 

: vr | 
Ce De 二 hea 
ee i : EE i 
图 4-37 背景 水 平平 铺 和 垂直 平 铺 的 效果 图 4-38 背景 定位 属性 取 值 单位 不 同 的 效果 


background-position 的 取 值 还 可 设置 为 负数 , 当 背 景 图 像 比 盒子 还 大 时 ,设置 为 负数 
可 以 让 盒子 不 显示 背景 图 像 的 左边 部 分 或 上 边 部 分 的 图 案 。 

背景 的 所 有 这 些 属 性 都 可 以 在 Dreamweaver 的 CSS 面板 的 “背景 ”选项 面板 中 设置 ， 
它们 之 间 的 对 应 关系 如 图 4-39 所 示 。 


div 的 CSS 规则 定义 x 
background-color#996600 background-image 
url(images/bg0.png) 


ene | 





i 
这 二 本 一， background-repeatno-repeat 
二 本 


医生 可 S| background-position 
background-attachmert 确定 | 取消 “| 应 用) | [ 忆 玫 本 
fixed - 








图 4-39 Dreamweaver 中 的 背景 设置 面板 


4.5.2 背景 的 基本 运用 技术 
1. 同时 运用 背景 颜色 和 背景 图 片 


在 一 些 网 页 中 ,网 页 的 背景 从 上 到 下 由 深 颜 色 逐 渐 过 滤 到 浅 颜色 ,由 于 网 页 的 高 度 通 
常 不 好 估计 ,所 以 无 法 只 用 一 幅 背 景 图 片 来 实现 这 种 渐变 背景 。 这 时 可 以 对 body 元 素 
同时 设置 背景 颜色 和 背景 图 片 ,在 网 页 的 上 部 采用 类 似 图 4-40 这 样 很 窄 的 渐变 图 片 水 平 
平 铺 作为 上 方 的 背景 ,再 用 一 种 和 图 片 底部 颜色 相同 的 颜色 作为 网 页 背景 色 ,这 样 就 实现 
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了 很 自然 的 渐变 效果 ,而 且 无 论 页 面 有 多 高 。 

制作 的 方法 是 在 CSS 中 设置 body 标记 的 背景 颜色 和 背 
景 图 片 ,并 把 背景 图 片 设置 为 横向 平 铺 就 可 以 实现 渐变 背景 
了 。CSS 代码 如 下 : 





body{ background:#666 url (images/body pg-gif) repeat— x; } 
2. 控制 背景 在 盒子 中 的 位 置 及 是 否 平 铺 


在 HTML 中 ,背景 图 像 只 能 平 铺 。 而 在 CSS 中 ,背景 图 
像 能 做 到 精确 定位 ,允许 不 平 铺 ,这 时 效果 就 像 普 通 的 img 元 
素 一 样 。 例 如 图 4-41 网 页 中 的 茶杯 图 像 就 是 用 让 背景 图 片 不 图 4_40 制作 网 页 背景 浙 变 
平 铺 并 且 定 位 于 右 下 角 实 现 的 。 实 现 的 代码 如 下 : 的 顶部 图 片 


body { background: #F7EF2DF Url (cha.jpg) no- repeat right bottam; } 





加 十 二 生肖 两 两 相对 - Microsoft Internet Explorer 
文件 下 编辑 下 ) 查看 WW) 收 疗 由 工具 们 ) 才 助 人 D 


QO Io Pm rom IB. 





十 二 生肖 两 两 相对 ， 六 道 轮回 


第 一 组 是 昭和 和 牛 ， 老 绍 代 表 智 慧 ， 牛 代表 勤奋 ， 智 慧 和 勤奋 一 定 要 
紧密 结合 在 一 起 ， 如 果 光 有 智慧 不 勤奋 ， 那 就 是 小 聪明 ， 光 是 勤奋 不 动 


， 那 就 是 思 毒 

第 二 组 是 虎 和 免 ， 老 虎 代表 勇猛 ， 兔 子 代表 谨慎 ， 勇 猛 和 谨慎 只 有 
结合 在 一 起 才能 做 到 胆 大 心细 ， 如 果 下 成 了 务工 ， 而 
光 有 了 心细 就 不 可 能 有 更 多 的 收获 …。 





图 4-41 背景 图 片 定位 在 右 下 角 且 不 平 铺 


如 果 和 希望 图 4-41 中 的 背景 图 片 始 终 位 于 浏览 器 的 右 下 角 , 不 会 随 网 页 的 滚动 而 滚 
动 , 则 可 将 background-attachment 属性 设置 为 fixed, 代 码 如 下 : 

body { backgrcund: #f7f2df url (cha.jpg) no- repeat fixed right bottam; } 

利用 背景 图 像 不 平 铺 的 方法 还 可 以 用 来 改变 列表 的 项 目 符号 。 虽 然 使 用 列表 元 素 
ul 的 CSS 属性 list-style-image:url(arrow. gif) 可 以 将 列表 项 前 面 的 小 黑 点 改变 成 自 定 义 
的 小 图 片 ,但 无 法 调整 小 图 片 和 列表 文字 之 间 的 距离 。 

要 解决 这 个 问题 ,可 以 将 小 图 片 设 置 成 1i 元 素 的 背景 ,不 平 铺 , 且 居 左 ,为 防止 文字 
谈 住 图 片 ,将 i 元 素 的 左 padding 设置 成 20px, 这 样 就 可 通过 调整 左 padding 的 值 实现 精 
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确 调整 列表 小 图 片 和 文字 之 间 的 距离 了 ,代码 如 下 ,效果 如 图 4-42 所 示 。 

uf{ 

list- style- type:none; } 

Ji{ 

background:url (arrow.gif) no- repeat Opx 3px; /* 距 左 边 0pw 距 上 边 3pxx* / 

padding- left:20px; } 

有 了 背景 的 精确 定位 能 力 , 完 全 可 以 使 列表 项 的 符 
号 出 现在 1 元素 中 的 任意 位 置 上 。 


3. 多 个 元 素 背 景 的 全 加 


背景 图 片 的 县 加 是 很 重要 的 CSS 技术 。 当 两 个 元 素 是 内 套 关 系 时 ,那么 里 面 元 素 盒 
子 的 背景 将 覆盖 在 外 面 元 素 盒子 背景 之 上 ,利用 这 一 点 ,再 结合 对 背景 图 片 位 置 的 控制 ， 
可 以 将 几 个 元 素 的 背景 图 像 巧妙 地 笃 加 起 来 。 下 面 以 4 图像 可 变 宽度 圆 角 栏目 框 的 制作 
来 介绍 多 个 元 素 背 景谷 加 的 技巧 。 

制作 可 变 宽度 的 圆 角 栏目 框 需要 4 个 圆 角 图 片 , 当 圆 角 框 制作 好 之 后 ,无论 怎 样 改变 
栏目 框 的 高 度 或 宽度 , 圆 角 框 都 能 根据 内 容 自动 适应 。 

由 于 需要 四 个 圆 角 图 片 做 可 变 宽度 的 圆 角 栏 目 框 , 而 一 个 元 素 的 盒子 只 能 放 一 张 背 
景 图 片 , 所 以 必须 准备 四 个 盒子 把 这 四 张 圆 角 图 片 分 别 作为 它们 的 背景 ,考虑 到 栏目 框 内 
容 的 语义 问题 ,这 里 选择 div、h3、p、span 四 个 元 素 ,按照 图 4-43 的 方式 设置 这 四 个 元 素 
的 背景 图 片 摆 放 位 置 ,并 且 都 不 平 铺 。 然 后 再 把 这 四 个 盒子 以 适当 的 方式 全 放 在 一 起 。 


“| 2 
mn 


| 


<div id="round"> <p> <span> 


图 4-43 4 图 像 可 变 宽度 圆 角 栏目 框 中 4 个 元 素 盒 子 的 背景 设置 





图 4-42 用 图 片 自 定义 项 目 符号 





从 图 4-43 中 可 以 看 出 ,要 形成 圆 角 栏目 框 ,首先 要 把 span 元 素 放 到 p 元 素 里 面 ,这 
样 它们 两 个 的 背景 就 共 加 在 一 起 ,形成 了 下 面 的 两 个 圆 角 ,然后 青 把 h3 元 素 和 p 元 素 都 
放 到 div 元 素 中 去 ,就 形成 了 一 个 圆 角 框 的 四 个 圆 角 了 。 因 此 ,结构 代码 如 下 : 
<div id round 
<h3> 圆 角 栏 目 框 的 标题 < /ba> 
< 了 <span> 栏 目 框 的 内 容 ……< /span>< /p> 
</div 
由 于 几 层 背景 的 又 加 ,背景 色 只 能 放 在 最 底层 的 盒子 上 ,因此 只 能 对 最 外 层 的 div 元 
素 设 置 背景 色 ,否则 上 面 元 素 的 背景 色 会 把 下 面 元 素 的 背景 图 片 ( 圆 角 ) 履 盖 掉 。 与 此 相 
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反 , 为 了 让 内 容 能 放 在 距 圆 角 框 边缘 有 一 定 内 边 距 的 区 域 ,必须 设置 padding 值 , 而且 
padding 值 只 能 设置 在 最 里 层 的 盒子 (span 和 h3) 上 。 因 为 如 果 将 padding 设置 在 外 层 盒 
子 ( 如 p) 上 , 则 内 外 层 盒子 的 边缘 无 法 对 齐 , 就 会 出 现 如 图 4-44 所 示 的 错误 。 

接 下 来 对 这 4 个 元 素 设置 CSS 属性 ,主要 是 将 这 4 个 圆 角 图 片 定 位 到 相应 的 位 置 
上 ,span 元 素 必 须 设 置 为 块 级 元 素 显 示 ,应 用 盒子 属性 才 会 有 正确 效果 。CSS 代码 如 下 : 





< style type= "text/css"> 
#round{ 
font: 12px/1.6 arial; 
background: #abc276 url (images/right- top.gif) no- repeat right top; } 
#rounded h3 { 
background: url (images/left- top.gif) no- repeat; 
Padding: 15px 20px 0; 


color: #fff; /* 设置 标题 的 文字 颜色 为 白色 * / 
margin: 0; } 
#romnded p { 
margin: 0; /* 清除 p 元 素 的 默认 边界 * / 
text- indent:2em; /* 内 容 部 分 段 前 空 两 格 * / 
background: url (images/left- bottam.gif) no- repeat left bottam; } 
#rounded span{ 
Padding: 10px 20px 13px; 
background:ur] (images/right- bottam.gif) no- repeat right bottomy } 
< /style> 


最 终 效果 如 图 4-45 所 示 。 但 这 个 圆 角 框 没有 边框 ,要 制作 带 有 边框 的 可 变 宽度 圆 角 
框 , 则 至 少 需要 4 张 图 片 通过 滑动 门 技术 实现 。 








可 变 宽度 网 角 杠 可 变 宽 度 圆 角 框 











图 4-44 错误 的 背景 图 像 位 置 图 4-45 最 终 的 效果 


4.5.3 滑动 门 技术 


CSS 中 有 一 种 著名 的 技术 叫 滑 动 门 技 术 (sliding doors technique) , 它 是 指 一 个 图 像 
在 另 一 个 图 像 上 滑动 ,将 它 的 一 部 分 隐藏 起 来 ,因此 而 得 名 。 实 际 上 它 是 一 种 背景 的 高 级 
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运用 技巧 ,主要 是 通过 两 个 盒子 背景 的 重要 和 控制 背景 图 片 的 定位 实现 的 。 
滑动 门 技术 的 典型 应 用 有 : 
(1) 制作 图 像 阴 影 ; 
(2) 制作 自 适应 宽度 的 圆 角 导航 条 。 


1. 图 像 阴影 


阴影 是 一 种 很 流行 ,很 有 吸引 力 的 图 像 处 理 技 巧 , 它 给 平淡 的 设计 增加 了 深度 ,形成 
立体 感 。 使 用 图 像 处 理 软件 很 容易 给 图 像 增添 阴影 。 但 是 ,可 以 使 用 CSS 产生 简单 阴影 
效果 ,而 不 需要 修改 底层 的 图 像 。 通 过 滑动 门 技术 制作 的 阴影 能 自 适应 图 像 的 大 小 , 即 不 
管 图 像 是 大 是 小 都 能 为 它 添 加 阴影 效果 。 这 对 于 交友 类 网 站 很 适合 ,因为 网 友 上 传 的 个 
人 生活 照片 大 小 一 般 都 是 不 一 样 的 ,而 这 种 方法 能 自 适应 地 为 这 些 照 片 添加 阴影 。 

图 4-46 展示 了 图 像 阴影 的 制作 过 程 , 在 图 4-46 中 有 6 张 小 图 ,对 其 进行 了 编号 (四 一 
@) ,在 下 面 的 制作 步骤 中 为 了 叙述 方便 我 们 用 图 中 一 @ 表 示 图 4-46 中 的 6 张 小 图 。 


XXXXXXXXXX 
exeoes eons 









































图 4-46 滑动 门 制作 图 片 阴影 原理 图 


(1) 准备 一 张 图 四 所 示 的 gif 图片 ,该 图 片 左 边 和 上 边 是 白色 部 分 ,其 他 区 域 是 完全 
透明 的 ,将 其 称 为 “左上 边 图 片 ”, 然 后 再 准备 一 张 图 @ 所 示 的 灰色 图 片 做 背景 ,灰色 图 片 
的 右边 和 下 边 最 好 有 和 柔 边 阴影 效果 ,这 两 张 图 片 都 可 以 比 待 添加 阴影 的 图 像 尺 寸 大 得 多 。 

(2) 把 待 添加 阴影 的 图 片 @ 放 到 灰色 图 片上 面 ,通过 设置 图 像框 的 填充 值 使 图 像 的 
右边 和 下 边 能 留 出 一 些 , 显 示 灰 色 的 背景 ,如 图 @ 所 示 , 灰 色 背 景 图 片 多 余 的 部 分 就 显示 
不 下 了 。 

(3) 接着 再 把 图 中 的 图 片 插入 到 图 像 和 灰色 背景 图 片 之 间 ,使 图 中 的 图 片 和 图 像 加 
的 图 片 从 左上 和 角 开 始 对 齐 。 这 样 它 的 右上 角 和 左下 角 就 挡住 阴影 了 。 就 出 现 了 如 图 加 所 
示 的 阴影 效果 。 
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(4) 图 加 的 图 片 比 图 像 大 一 些 也 没关系 ,因为 图 中 的 图 片 和 图 像 是 左上 角 对 齐 的 ,所 
以 其 超出 图 像 盒子 的 右边 和 下 边 部 分 就 显示 不 下 了 。 而 图 @ 的 灰色 背景 图 片 由 于 是 从 右 
下 角 开 始 铺 , 所 以 超出 图 像 盒子 的 左边 和 上 边 部 分 就 显示 不 下 了 。 如 图 @ 所 示 ,这样 图 像 
阴影 就 能 自 适应 图 像 大 小 ,就 好 像 中 和 加 两 张 图 片 分 别 向 右 下 和 左上 两 个 方向 滑动 一 样 。 

也 可 以 不 用 图 回 的 图 片 文件 做 灰色 的 背景 ,而 是 直接 将 img 元 素 的 背景 设 为 灰色 ， 
再 设置 它 的 背景 图 片 为 图 四 的 图 片 , 由 于 背景 图 片 会 位 于 背景 颜色 上 方 , 这 样 就 出 现 了 没 
有 和 柔 边 的 阴影 效果 。 代 码 如 下 ,效果 如 图 4-47 所 示 。 








img { 
background- color: #00c; /< 灰色 背景 作为 阴影 * / 
Padtiing:0 6px rx 0; /* 使 右边 和 下 边 留 出 一 部 分 显示 灰色 背景 * / 
background image: url (top- left.gif)7 /* 背景 图 像 为 左上 边 图 片 * / 


} 

< img src= "works.jpg"/> 

当然 最 好 先 给 图 片 添加 边框 和 填充 ,使 图 片 出 现 相 框 效果 ,再 对 它 添 加 阴影 效果 ,这 
样 更 美观 。 由 于 阴影 必须 在 img 图 像 的 边框 外 出 现 ,所 以 在 img ee 
一 个 盒子 。 这 里 选择 将 img 元 素 放 和 人 到 一 个 div 元 素 中 。 代 码 如 下 ,效果 如 图 4-48 


所 示 。 

.shadow img { 
background- color: #FFF; /* 图 像 填充 区 的 背景 为 白色 * / 
Padaing: 6px7 
border: lpx solid #333; /* 图 像 边 框 为 灰色 x/  } 

.shacow { 
background: #ccc url (top- left.gif); /* 左 上边 图 像 将 从 放 在 灰色 背景 之 上 * / 
float: left; /* 浮动 使 div 宽 度 不 会 自动 伸展 * / 
Padaing:0 grx gx 0;  } 


< div class= "shadow"> < img src= "works.jpg"/> < /div> 








图 4-47 是 和 于 img 的 背景 色 和 左上 边 图 片 制作 阴影 效果 图 4-48 添加 了 边框 后 的 阴影 效果 
Eo 光 过 果 ， 


ee 而 还 是 采用 图 4-46@ 中 一 张 右边 和 下 边 是 柔 边 阴影 的 图 像 做 阴 
影 。 这 样 img 图 像 下 面 就 必须 有 两 张 图 片 重 倒 ,最 底层 放 阴 影 图 片 (图 4-46@@) ,上面 一 
层 放 左上 边 图 片 (图 4-46@ ) 。 因 为 每 个 元 素 只 能 设置 一 张 背景 图 片 ,而 为 了 放 两 张 背 景 
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图 片 ,就 必须 有 两 个 盒子 。 因 此 必须 在 img 元 素 外 套 两 层 div。 


另外 ,我 们 知道 png 格式 的 图 片 支持 Alpha 透明 ( 即 半 透明 ) 效 果 , 因 此 可 以 将 左上 
边 图 片 (图 4-46 〇 D) 和 灰色 背景 图 像 交 界 处 的 地 方 做 成 半 透 明 的 白色 ,保存 为 png 格式 后 
引入 ,这 样 阴 影 就 能 很 自然 地 从 白色 过 渡 到 灰色 ,IE 7 和 Firefox 中 均 能 看 到 这 种 阴影 过 
渡 的 Alpha 透明 效果 ,但 IE 6 由 于 不 支持 png 的 Alpha 透明 (但 能 显示 png 格式 的 图 
片 ) ,所 以 看 不 到 柔 边 效果 。 实 现 的 代码 如 下 ,效果 如 图 4-49 所 示 。 


.Shagow jmg { 
background- color: White; 
Padding: rx; 
border: lpx solid #333; } 
-Shadow div { 
background- image: url (top- left .png); 
Padding:0 Epx px 0; /* 留 出 两 张 背景 图 片 的 显示 位 置 * /} 
-Shadow { 
background: url (images/bottcm right.gif) right bottamy 
float: left; } 
< div class= "shadow"> < div> < img src= "works.jpg"/> < /div> < /div> 
这 样 就 实现 了 图 像 柔 边 阴 影 效 果 , 由 于 左上 边 图 片 和 [EECAESIGIZI 
img 图 像 是 左上 角 对 齐 , 所 以 如 果 左 上 边 图 片 比 img 图 像 
大 , 即 超过 了 div 盒子 的 大 小 ,那么 多 出 的 右 下 部 分 将 显示 
不 下 。 同 样 ,阴影 背景 图 像 与 img 图 像 从 右 下 角 开 始 对 齐 ， 
如 果 背 景 图 像 比 盒子 大 ,那么 背景 图 像 的 左上 部 分 也 会 自动 
被 裁 去 。 所 以 ,我 们 可 以 把 这 两 张 图 片 都 做 大 些 , 就 能 自 适 
应 地 为 任何 大 小 的 图 片 添加 阴影 效果 。 


2. 自 适应 宽度 圆 角 导航 条 








图 4-49 通过 图 像 实现 了 
和 柔 边 的 阴影 效果 


现在 很 多 网 站 都 使 用 了 圆 角 形式 的 导航 条 ,这 种 导航 条 
两 端 是 圆 角 ,而 且 还 可 以 带 有 背景 图 案 , 如 果 导 航 条 中 的 每 
一 个 导航 项 是 等 宽 的 ,那么 制作 起 来 很 简单 ,用 一 张 圆 角 图 片 作为 导航 条 中 所 有 a 元 素 的 
background-image 就 可 以 了 。 

但 是 有 些 导 航 条 中 的 每 个 导航 项 并 不 是 等 宽 的 ,如 图 4-50 所 示 , 这 时 能 否 仍 用 一 张 
圆 角 图 片 做 所 有 导航 项 的 背景 呢 ? 答案 是 肯定 的 ,使 用 滑动 门 技术 就 能 实现 : 当 导航 项 
中 的 文字 增多 时 , 圆 角 图 片 就 能 够 自动 伸展 (当然 这 并 不 是 通过 对 图 片 进行 拉 伸 实现 的 ， 
那样 会 使 圆 角 发 生变 形 )。 它 的 原理 是 用 一 张 很 宽 的 圆 角 图 片 给 所 有 导航 项 做 背景 。 








[| | sr | mens | rss | 
图 4-50 自 适应 宽度 的 圆 角 导航 条 


由 于 导航 项 的 宽度 不 固定 ,而 圆 角 总 要 位 于 导航 项 的 两 端 。 这 就 需要 两 个 元 素 的 盒 
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子 分 别 放 圆 角 图 片 的 左右 部 分 ,而 且 它 们 之 间 要 发 生 重 概 ,所 以 选择 在 a 元 素 中 舱 入 b 元 
素 , 这 样 就 得 到 了 两 个 舱 套 的 盒子 。 制 作 步 又 如 下 : 
(1) 首先 写 结构 代码 。 








<div icF "nav> 

<ahref= 叶 "><b> 首 页 < 上/b></a> 

<ahre 伍 哇 " 必 <p> 中 心 简介 < /></a> 

<ahref= 叶 "><b> 常 用 下 载 < /b>< /a> 

<ahre 伍 嘎 "><b> 为 您 服务 < /tc>< /a> 

<ahref= 叶 "><kb> 技 术 支 持 和 服务 < /b>< /a> 
</div> 


(2) 分 析 : a 元 素 的 盒子 放 圆 角 图 片 的 左边 部 分 ,这 可 以 通过 设置 盒子 宽度 比 圆 角 图 
片 窗 , 让 圆 角 图 片 作为 背景 从 左边 开始 平 铺 盒子 ,那么 圆 角 图 片 的 右边 部 分 盒子 就 容纳 不 


下 了 ,效果 如 图 4-51@ 所 示 。 


@ b 元 素 的 盒子 
把 b 元 素 插入 到 a 元 素 中 
GD a 元 素 的 盒子 加 a 元 素 的 盒子 被 撑 大 


册 b 元 素 的 背景 将 合 放 在 a 元 素 上 


技术 支持 和 服气 





@@ 形 成 圆 角 导 航 条 效果 
图 4-51 滑动 门 圆 角 导 航 条 示意 图 


b 元 素 盒子 放 圆 角 图 片 的 右边 一 部 分 ,由 于 盒子 宽度 小 于 圆 角 图 片 宽 , 让 圆 角 图 片 作 
为 背景 从 右边 开始 平 铺 盒 子 ,那么 圆 角 图 片 的 左边 就 容纳 不 下 了 。 效 果 如 图 4-51@ 
所 示 。 

再 把 b 元素 插 入 到 a 元 素 中 ,这 时 a 元 素 的 盒子 为 了 容纳 b 的 盒子 会 被 撑 大 ,如 
图 4-51@@ 所 示 。 这 样 里 面 盒 子 的 背景 就 位 于 外 面 盒子 背景 的 上 方 , 通 过 设置 a 元 素 的 左 
填充 值 使 b 的 盒子 不 会 挡住 a 盒子 左边 的 圆 角 ,而 b 盒子 右边 的 圆 角 (上 方 为 不 透明 白色 
背景 ) 则 挡住 了 a 盒子 右边 的 背景 ,这 样 左右 两 边 的 圆 角 就 都 出 现 了 ,如 图 4-51@ 四 所 示 。 
同时 ,改变 文字 的 多 少 ,能 使 导航 条 自动 伸展 ,而 圆 角 部 分 位 于 padding 区 域 ,不 会 影响 
圆 角 。 

(3) 根据 以 上 分 析 设置 外 面 盒 子 a 元素 的 CSS 样式 : 


#nava { 


font— size: 14px; color: white; 
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text- decoration: none; /* 以 上 三 条 为 设置 文字 的 一 般 样 式 * / 

height: 32px; 

line- height: 32px; /* 设置 盒子 高 度 与 行 高 相等 ,实现 文字 垂直 居中 * / 
paddlingr- left: 24px; /* 设置 左 填充 为 24px, 防 止 里 面 的 内 容 挡 住 左 圆 角 x* / 
display: block; 

float: left; /* 使 导航 项 水 平 排列 * / 


background: url(roung.gif); ”/* 背景 图 像 默 认 从 左边 开始 铺 * /} 
(4) 再 写 里 面 盒子 b 元 素 的 CSS 样式 代码 : 


#navab{ 
background: url (round.gif) right top; /* 使 用 同一 张 背景 图 像 但 从 右边 开始 铺 * / 
display: block; 
padding- right: 24px; /* 防止 里 面 的 文字 内 容 挡 住 右 圆 角 x /} 


(5) 最 后 给 导航 条 添加 简单 的 交互 效果 : 


#nav a:hover { 
color: silver; /* 改变 文字 颜色 * / } 


4.5.4 背景 图 像 的 翻转 


我 们 知道 ,通过 背景 定位 属性 (background-position) 可 以 使 背景 图 片 从 盒子 的 任意 
位 置 上 开始 显示 ,如 果 设 置 background-position 为 负 值 ,那么 将 有 一 部 分 背景 移出 盒子 ， 
而 不 会 显示 在 盒子 上 ;如果 盒 子 没有 背景 那么 大 ,那么 只 能 显示 背景 图 的 一 部 分 。 

利用 这 些 特 点 ,我 们 可 以 将 多 个 背景 图 像 放 置 在 一 个 大 的 图 片 文件 里 ,让 每 个 元 素 的 
盒子 只 显示 这 张大 背景 图 的 一 部 分 ,例如 制作 导航 条 时 ,在 默认 状态 下 显示 背景 图 的 上 半 
部 分 ,鼠标 滑 过 时 显示 背景 图 的 下 半 部 分 ,这 样 就 用 一 张 图 片 实现 了 导航 条 背景 的 翻转 。 

把 多 个 背景 图 像 放 在 一 个 图 像 文 件 里 的 好 处 有 以 下 两 点 : 

(1) 减少 了 文件 的 数量 ,便于 网 站 的 维护 管理 。 

(2) 鼠标 指针 移动 某 个 导航 项 上 ,如 果 要 更 换 一 个 背景 图 像 文 件 ,那么 有 可 能 要 替换 
的 图 像 还 没有 下 载 下 来 ,就 会 出 现 一 下 停顿 ,浏览 者 会 不 知 发 生 了 什么 ,而 如 果 使 用 同一 
个 文件 ,就 不 会 出 现 这 个 问题 了 。 

例如 ,对 于 自 适应 宽度 圆 角 导航 条 来 说 ,我 们 可 以 把 导航 条 鼠标 离开 和 滑 过 两 种 状态 
时 的 背景 做 在 同一 个 图 像 文件 里 ,如 图 4-52 所 示 。 实 现在 鼠标 滑 过 时 背景 图 案 的 翻转 ， 
即 当 鼠标 滑 过 时 ,让 它 显示 图 片 的 下 半 部 分 ,默认 时 则 显示 图 片 的 上 半 部 分 。 


图 4-52 将 正常 状态 和 鼠标 悬 停 状态 的 背景 图 案 放 在 一 张 图 片 round. gif 中 


在 前 面 的 自 适应 宽度 圆 角 导航 条 的 CSS 代码 中 添加 如 下 代码 。 


a:hover { 
background- position:0 - 32px; /x* 让 背景 图 片 从 左边 开始 铺 , 向 上 偏 移 32pxx / 
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} 

a:hover b{ 
background- position:100% - 32px; /x* 让 背景 图 片 从 右边 开始 铺 , 向 上 偏 移 32pxx / 
color: red; } 


这 样 ,应 用 了 图 片 翻转 的 滑动 门 技术 导航 条 就 制作 完成 了 ,最 终 效果 如 图 4-53 所 示 。 


ATR EIT (i 


图 4-53 带 有 图 片 翻转 效果 的 滑动 门 导航 条 





目前 ,推荐 把 许多 小 的 背景 图 像 放 在 一 个 图 片 文件 里 ,这 种 技术 叫 作 CSS Sprite 技 
术 。 这 样 可 减少 要 下 载 的 文件 数量 ,从 而 减少 对 服务 器 的 请 求 次 数 ,加 快 页 面 载 人 速度 。 


4.5.5 CSS 圆 角 设 计 


圆 角 在 网 页 设计 中 让 人 又 爱 又 恨 ,一 方面 设计 师 为 追求 美观 的 效果 经 常 需要 借助 于 
圆 角 , 另 一 方面 为 了 在 网 页 中 设计 圆 角 又 不 得 不 增添 很 多 工作 量 。 在 用 表格 设计 圆 角 框 
时 ,制作 一 个 固定 宽度 的 圆 角 框 需要 一 个 三 行 一 列 的 表格 ,在 上 下 两 格 放 圆 角 图 案 。 而 用 
表格 制作 一 个 可 变 宽度 的 圆 角 框 则 更 复杂 ,通常 采用 ”九宫 格 ? 的 思想 制作 , 即 利用 一 个 三 
行 三 列 的 表格 ,把 四 个 角 的 圆 角 图 案 放 到 表格 的 左上 、 右 上 、 左 下 、 右 下 四 个 单元 格 中 ,把 
圆 角 框 四 条 边 的 图 案 在 表格 的 上 中 、 左 中 、 右 中 和 下 中 四 个 单元 格 中 进行 平 铺 , 在 中 间 一 
个 单元 格 中 放 内 容 。 而 使 用 CSS 设计 圆 角 框 , 则 相对 简单 些 ,下 面 对 CSS 圆 角 设 计 分 类 
进行 讨论 。 

制作 固定 宽度 的 圆 角 框 (不 带 边框 的 、 带 边框 的 ) 


用 CSS 制作 不 带 边框 的 固定 宽度 圆 角 框 (如 图 4-54 所 示 ) 至 少 需要 两 个 盒子 : 一 个 
盒子 放置 顶部 的 圆 角 图 案 ; 另 一 个 盒子 放置 底部 的 圆 角 图 案 ,并 使 它 位 于 盒子 底部 。 把 这 
两 个 盒子 释放 在 一 起 ,再 对 栏目 框 设 置 和 圆 角 相同 的 背景 色 就 可 以 了 。 关 键 代 码 如 下 ， 


#rounded{ 
font: 12px/1.6 arial; 
background: #cba276 Url (images/bottom. 
gif) no- repeat left bottam; 
width: 280px; 
Padding: 0 0 18px; 
margin:0 auto; } 
#rounded h3 { 
background: url (images/top.gif) no- repeat; 不 带 边 框 的 岗 角 框 
Padding: 20px 20px 0; 
font— size: 170%; Color: white; 
line height :lem; 
margin: 0; } 
<div id "rounded"> 
<h3> 不 带 边框 的 固定 宽度 贺 角 框 < /h3> 4-54 不 带 边框 的 圆 角 框 





< 他 这 是 一 个 国定 宽度 的 圆 角 框 ……< /p> 
</div> 


制作 带 边 框 的 固定 宽度 圆 角 框 (如 图 4-55 
圆 角 框 中 部 的 边框 和 青 景 组 成 的 图 案 , 并 使 它 重 i 
直 平 销 ,上 面 两 层 的 盒子 分 别 放 置顶 部 的 圆 角 和 。 用 的 度 ， 因 此 利 作 起 来客 昌 有 从 单 。 这 个 
底部 的 圆 角 , 这 样 在 顶部 和 底部 圆 角 图 片 就 这 盖 “| 和 和 二 相交 人 和 和 人生 相生 
了 中 部 的 图 案 , 形 成 了 完整 的 圆 角 框 。 


图 4-55 带 边框 的 圆 角 框 
font: 12px/1.6 arial; 
background: url (images/middle- frame.gif) repeat— y; 
width: 280px; 
Padding: 0; 
margin:0 auto; } 
#rounded h3 { 
background: url (images/top- frame.gif) no- repeat; 
Padding: 20px 20px 0; 
font- size: 170%; Color: #dba2767 
margin: 07 } 
#roungded p.last { 
Padding: 0 20px 18px; 
background: url (images/bottom- frame.gif) no- repeat left bottam 





height:1%; /* 防止 元 素 没有 内 容 在 正 6 中 不 显示 */  } 
<div id "rounded"> 
<h3> 带 边框 的 圆 角 框 < /h3> 


< 户 这 是 一 个 固定 宽度 的 圆 角 框 ……< /p> 
<p class= "last"> < /p> 
< /div> 
需要 说 明 的 是 ,顶部 的 圆 角 图 案 和 底部 的 圆 角 图 案 既 可 以 分 别 做 成 一 张 图 片 ,也 可 以 
把 它们 都 放 在 一 张 图 片 里 ,通过 控制 背景 位 置 来 实现 显示 哪 部 分 圆 角 。 


4.6 ”盒子 的 浮动 


在 标准 流 中 , 块 级 元 素 的 盒子 都 是 上 下 排列 的 ,行内 元 素 的 盒子 都 是 左右 排列 ,如 果 
仅仅 按照 标准 流 的 方式 进行 排列 ,就 只 有 这 几 种 可 能 性 ,限制 太 大 。CSS 的 制定 者 也 想 
到 了 这 样 排列 限制 的 问题 ,因此 又 给 出 了 浮动 和 定位 方式 ,从 而 使 排版 的 灵活 性 大 大 
提高 。 

例如 ,如 果 和 希望 相 邻 块 级 元 素 的 盒子 左右 排列 (所 有 盒子 浮动 ) 或 者 希望 一 个 盒子 被 
另 一 个 盒子 中 的 内 容 所 环绕 (一 个 盒子 浮动 ) 做 出 图 文 混 排 的 效果 ,这 时 最 简单 的 实现 办 
法 就 是 运用 浮动 (float) 属 性 使 盒子 在 浮动 方式 下 定位 。 
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4.6.1 盒子 浮动 后 的 特点 


在 标准 流 中 ,一 个 块 级 元 素 在 水 平方 向 会 自动 伸展 ,在 它 的 父 元 素 中 占 满 整个 一 行 ; 
而 在 竖 直方 向 和 其 他 元 素 依 次 排列 ,不 能 并 排 ,如 图 4-56 
所 示 。 使 用 “浮动 ”方式 后 ,这 种 排列 方式 就 会 发 生 
改变 。 

CSS 中 有 一 个 float 属性 ,默认 值 为 none, 也 就 是 
标准 流通 常 的 情况 ,如 果 将 float 属性 的 值 设 为 left 或 
right, 元 素 就 会 向 其 父 元 素 的 左 侧 或 右 侧 靠 紧 ,同时 盒 
子 的 宽度 不 再 伸展 ,而 是 收缩 ,在 没 设置 宽度 时 ,会 根 
据 盒 子 里 面 的 内 容 来 确定 宽度 。 

下 面 通过 一 个 实验 来 演示 浮动 的 作用 ,基础 代码 图 456 三 个 盒子 在 标准 流 中 
(4-4. html) 如 下 ,这 个 代码 中 没有 使 用 浮动 , 它 的 显示 
效果 如 图 4-56 所 示 。 


< style type= "text/css"> 
div{ 
padding:l0rx; margin:l0px; 
border:lpx dashed #111; 
background- color:#90baff; } 
.father{ 
background- color:#ff9; 
border: lrx solid #111; } 
< /style> 
<div class= "father"> 
<div class= "sonl"> Box- 1< /div> 
<div class= "son2"> Box- 2< /div> 
<div class= "son3"> Box- 3 /div> 
</div> 























1， 一 个 盒子 浮动 
接 下 来 在 上 述 代码 中 添加 一 条 CSS 代码 ,使 Box-l 盒子 浮动 。 代 码 如 下 : 
.sonl{ float:left; } 


此 时 显示 效果 如 图 4-57 所 示 , 可 发 现 给 Box-l 添加 浮动 属性 后 ,Box-l 的 宽度 不 再 自 
动 伸展 ,而 且 不 再 占据 原来 浏览 器 分 配给 它 的 位 置 。 如 果 再 在 未 浮动 的 盒子 Box-2 中 添 
一 行文 本 ,就 会 发 现 Box-2 中 的 内 容 是 环绕 着 浮动 盒子 的 ,如 图 4-58 所 示 。 




















图 4-57 第 一 个 盒子 浮动 图 4-58 增加 第 二 个 盒子 的 内 容 


总 结 : 设置 元 素 浮动 后 ,元 素 发 生 了 如 下 一 些 改变 : 

(1) 浮动 后 的 盒子 将 以 块 级 元 素 显 示 , 但 宽度 不 会 自动 伸展 。 

(2) 浮动 的 盒子 将 脱离 标准 流 , 即 不 再 占据 浏览 器 原来 分 配给 它 的 位 置 CIE 6 有 时 
例外 ) 。 

(3) 未 浮动 的 盒子 将 占据 浮动 盒子 的 位 置 , 同 时 未 浮动 盒子 内 的 内 容 会 环绕 浮动 后 
的 盒子 。 

提示 : 所 谓 “ 脱 离 标准 流 ”, 是 指 元 素 不 再 占据 在 标准 流下 浏览 器 分 配给 它 的 空间 ,其 
他 元 素 就 好 像 这 个 元 素 不 存在 一 样 。 例 如 ,在 图 4-57 中 , 当 Box-l 浮动 后 ,Box-2 就 顶 到 
了 Box-l 的 位 置 , 相 当 于 Box-2 视 Box-l1 不 存在 一 样 。 但 是 ,浮动 元 素 并 没有 完全 脱离 标 
准 流 , 这 表现 在 浮动 盒子 会 影响 未 浮动 盒子 中 内 容 的 排列 ,例如 ,Box-2 中 的 内 容 会 跟 在 
Box-1 盒子 之 后 进行 排列 ,而 不 会 忽略 Box-1 盒子 的 存在 。 


2. 多 个 盒子 浮动 
在 Box-l 浮动 的 基础 上 再 设置 Box-2 也 左 浮动 ,代码 如 下 : 


.son2{ float:left; } 


此 时 显示 效果 如 图 4-59 所 示 ( 在 Box-3 中 添加 了 一 行文 本 )。 可 发 现 Box-2 盒子 浮 
动 后 仍然 遵循 上 面 浮 动 的 规律 , 即 Box-2 的 宽度 也 不 再 自动 伸展 ,而 且 不 再 占据 原来 浏览 
器 分 配给 它 的 位 置 。 

如 果 将 Box-1 的 浮动 方式 改 为 右 浮 动 , 则 显示 效果 如 图 4-60 所 示 , 可 看 到 Box-2 在 
位 置 上 移动 到 了 Box-l 的 前 面 。 
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图 4-59 设置 两 个 盒子 浮动 图 4-60 改变 浮动 方向 


接 下 来 再 设置 Box-3 也 左 浮动 ,此 时 显示 效果 如 图 4-61 所 示 。 可 发 现 三 个 盒子 都 浮 
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动 后 ,就 产生 了 块 级 元 素 水 平 排列 的 效果 。 同 时 由 
于 都 脱离 了 标准 流 ,导致 其 父 元 素 中 的 内 容 为 空 。 
总 结 : 对 于 多 个 盒子 浮动 ,除了 每 个 浮动 盒子 
都 遵循 单个 盒子 浮动 的 规律 外 ,还 有 以 下 两 条 规律 : 
(1) 多 个 浮动 元 素 不 会 相互 覆盖 , 一 个 浮动 元 
素 的 外 边界 (margin) 碰 到 另 一 个 浮动 元 素 的 外 边界 于 光 
后 便 停止 运动 。 
(2) 车 包含 的 容器 太 窄 ,无 法 容纳 水 平 排列 的 多 个 浮动 元 素 ,那么 最 后 的 浮动 盒子 会 
向 下 移动 ( 见 图 4-62)。 但 如 果 浮动 元 素 的 高 度 不 同 , 那 当 它们 向 下 移动 时 可 能 会 被 卡 住 
( 见 图 4-63) 。 


















































图 4-62 没有 足够 的 水 平 空间 图 4-63 被 Box-1 卡 住 了 


4.6.2 浮动 的 清除 


clear 是 清除 浮动 属性 , 它 的 取 值 有 left、right、both 和 none( 默 认 值 ) 。 如 果 设 置 盒子 
的 清除 浮动 属性 clear 值 为 left 或 right, 则 表示 该 盒子 的 左边 或 右边 不 允许 有 浮动 的 对 
象 。 值 设置 为 both, 则 表示 两 边 都 不 允许 有 浮动 对 象 ,因此 该 盒子 将 会 在 浏览 器 中 另 起 
一 行 显示 。 

例如 ,在 如 图 4-60 所 示 的 两 个 盒子 浮动 的 基础 上 ,设置 Box-3 清除 浮动 , 即 在 4-4. 
html 中 添加 以 下 CSS 代码 ,效果 如 图 4-64 所 示 。 

.sonl{ float:right; } 

.son2{ float:left; } 

.son3{ clear:both; } 

可 以 看 到 ,对 Box-3 清除 浮动 (clear:both;) ,表示 Box-3 的 左右 两 边 都 不 允许 有 浮动 
的 元 素 , 因 此 Box-3 移动 到 了 下 一 行 显示 。 

实际 上 ,clear 属性 既 可 以 用 在 未 浮动 的 元 素 上 ,也 可 以 用 在 浮动 的 元 素 上 ,如 果 对 
Box-3 同时 设置 清除 浮动 和 浮动 , 即 : 

.son3{clear:both; float:left;} 


则 效果 如 图 4-65 所 示 , 可 看 到 Box-3 的 左右 仍然 没有 了 浮动 的 元 素 。 
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图 4-64 对 Box-3 清除 浮动 图 4-65 对 Box-3 设置 清除 浮动 和 浮动 


由 此 可 见 ,清除 浮动 是 清除 其 他 盒子 浮动 对 该 元 素 的 影响 ,而 设置 浮动 是 让 元 素 自 身 
浮动 ,两 者 并 不 矛盾 ,因此 可 同时 设置 元 素 清除 浮动 和 浮动 。 

由 于 上 下 margin 至 加 只 会 发 生 在 标准 流 布 局 的 情况 下 ,而 浮动 方式 下 盒子 的 任何 
margin 都 不 会 发 生 公 加 ,所 以 可 设置 盒子 浮动 并 清除 浮动 ,使 上 下 两 个 盒子 的 margin 不 
得 加 。 在 图 4-65 中 ,Box-3 到 Box-l 之 间 的 垂直 距离 是 20px, 即 它们 的 margin 之 和 。 

提示 : 在 CSS 布局 时 ,如 果 发 现 一 个 元 素 移动 到 了 它 原 来 位 置 的 左上 方 或 右上 方 ,并 
且 和 其 他 元 素 发 生 了 重治 ,90% 都 是 因为 受到 了 其 他 鲍 子 浮动 的 影响 ,对 其 添加 一 条 
clear 属性 清除 浮动 即 可 。 


4.6.3 浮动 的 浏览 器 解释 问题 


设置 元 素 浮动 后 ,浮动 元 素 的 父 元 素 或 相 邻 元 素 在 IE 和 Firefox 中 的 显示 效果 经 党 
不 一 致 ,这 主要 是 因为 浏览 器 对 浮动 的 解释 不 同 产生 的 。 在 标准 浏览 器 中 ,浮动 元 素 脱离 
了 标准 流 , 因 此 不 占据 它 原来 的 位 置 或 外 围 容器 空间 。 但 是 在 IE 中 (包括 IE 6 和 1IE 7)， 
如 果 一 个 元 素 浮动 ,同时 对 它 的 父 元 素 设置 宽 或 高 ,或 对 它 后 面相 邻 元 素 设置 宽 或 高 , 那 
么 浮动 元 素 仍 然 会 占据 它 在 标准 流下 的 空间 。 下 面 对 这 两 种 情况 分 别 来 讨论 。 


1. 元 素 浮动 但 是 其 父 元 素 不 浮动 


如 果 一 个 元 素 浮动 ,但 是 它 的 父 元 素 不 浮动 ,那么 父 元 素 的 显示 效果 在 不 同 浏 览 器 中 
可 能 不 同 ,这 取决 于 父 元 素 是 否 设 置 了 宽 或 高 。 当 未 设置 父 元 素 ( 外 围 容器 ) 的 宽 或 高 时 ， 
IE 和 Firefox 对 浮动 的 显示 是 相同 的 , 均 脱 离 了 标准 流 。 下 面 是 一 个 示例 。 

将 4.6.1 节 中 的 结构 代码 (4-4. html) 修 改 一 下 ,只 保留 Box-l ,代码 如 下 : 

<div class= "father"> 

<div class= "sonl"> Box- 1<br /> Box- 1< /div> 

</div> 

然后 设置 Box-1 浮动 , 即 “. sonl{float:left; )”, 此 时 在 Firefox 和 IE 中 的 效果 如 
图 4-66 所 示 。 可 发 现 两 者 效果 基本 相同 。 

接 下 来 ,我 们 就 对 父 元 素 “. father” 设 置 宽度 , 即 添加 “. father{ width:180px; })” 此 
时 在 Firefox 和 IE 中 的 效果 如 图 4-67 所 示 。 可 发 现在 IE 中 浮动 元 素 确实 占据 了 外 围 容 
器 空间 ,未 脱离 标准 流 。 如 果 对 “. father” 不 设置 宽度 而 是 设置 高 度 ,也 会 有 类 似 的 效果 。 
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图 4-67 设置 父 元 素 宽度 时 在 Firefox 和 IE 中 的 效果 


可 见 , 当 设 置 了 父 元 素 的 宽度 或 高 度 后 ,IE 6 中 的 浮动 元 素 将 占据 外 围 容器 的 空间 ， 
而 Firefox 等 其 他 浏览 器 仍然 不 占据 。 


2. 扩展 外 围 盒子 的 高 度 (4-5. html) 


但 是 有 时 我 们 可 能 更 希望 得 到 图 4-67 中 IE 的 这 种 效果 , 即 让 浮动 的 盒子 仍然 置 于 
外 围 容器 中 。 人 们 把 这 种 需求 称 为 “扩展 外 围 盒子 的 高 度 ”, 要 做 到 这 一 点 ,对 于 IE 来 说 
只 需要 设置 父 元 素 的 宽度 或 高 度 就 可 以 了 。 但 对 于 Firefox 等 标准 浏览 器 ,就 需要 在 浮 
动 元 素 的 后 面 增加 一 个 清除 浮动 的 空 元 素 ,来 把 外 围 盒 子 撑 开 。 例 如 ,把 上 面 的 结构 代码 
修改 如 下 : 


<div class= "father"> 

<div class= "sonl"> Box- 1<br /> Box- 1< /div> 
<div class= "clear>< /div> 
< /div> 


然后 为 这 个 div 设置 样式 ,CSS 代码 如 下 : 


.father .clear { 
margin: 0; padding: 0; border:0; 
clear: both; } 

这 时 在 Firefox 中 效果 如 图 4-68 所 示 , 可 看 到 已 经 实 
现 了 IE 的 这 种 效果 。 

如 果 不 想 添 加 一 个 空 元 素 , 对 于 支持 伪 对 象 选择 器 的 
浏览 器 来 说 ,也 可 以 利用 父 元 素 的 :after 伪 对 象 在 所 有 浮 
动 子 元 素 后 生成 一 个 伪 元 素 , 设 置 这 个 伪 元 素 为 块 级 显 。 国 468 对 RUIOA 扩展 外 间 
示 , 清 除 浮动 ,也 能 达到 同样 的 效果 。 代 码 如 下 。 二 
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div.father:after { 

content:"."; /* 设置 伪 元 素 内 容 ,此 处 可 为 任意 内 容 * / 

display:block; 

font- size:0; line- height:0; height:0; 

/* 将 伪 元 素 高 度 等 设 为 0, 使 其 不 占 空间 * / 

Clear:both; /* 清除 浮动 x / 

visibility:hidden; /* 隐藏 该 伪 元 素 的 内 容 * / 
} 
扩展 外 围 盒 子 高 度 的 第 3 种 方法 是 设置 浮动 元 素 的 父 元 素 的 overflow 属性 为 

hidden, 具 体 请 参看 4. 7.6 节 overflow 属性 用 法 。 


3. 元 素 浮动 但 是 其 后 面相 邻 元 素 不 浮动 


如 果 一 个 元 素 浮动 ,但 是 它 后 面相 邻 的 元 素 不 浮动 。 在 不 设置 后 面相 邻 元 素 的 宽 或 
高 时 ,IE 和 Firefox 显示 效果 相同 。 一 旦 设置 了 后 面相 邻 元 素 的 宽 或 高 , 则 在 IE 中 ,浮动 
元 素 将 仍然 占据 它 原来 的 空间 ,未 浮动 元 素 跟 在 它 后 面 。 从 本 质 上 来 看 ,这 也 是 IE 浮动 
的 盒子 未 脱离 标准 流 的 问题 。 

下 面 将 4. 6. 1 节 中 的 结构 代码 (4-4. html) 修 改 一 下 ,保留 Box-1 和 Box-2, 代 码 如 下 ， 


<div class= "father"> 

<div class= "sonl"> Box- 1< /div> 

<div class= "son2"> Box- 2< br /> Box- 2< br /> Box- 2< /div> 
</div> 


然后 设置 “. son1” 浮 动 , 即 “. sonl {float:left; }”, 此 时 在 Firefox 和 了 IE6 中 的 效果 如 图 4-69 所 
示 。 可 发 现 两 者 效果 基本 相同 。 




















图 4-69 当 浮 动 盒子 后 面 的 未 浮动 盒子 未 设置 宽 或 高 时 ,Firefox 和 IE 6 显示 基本 相同 


接 下 来 ,对 “. son2” 设 置 高 度 , 即 添加 “. son2{height: 40px; }”, 此 时 在 Firefox 和 IE 
中 的 效果 如 图 4-70 所 示 。 可 发 现在 IE 中 浮动 元 素 确实 占据 了 外 围 容器 空间 ,未 脱离 标 
准 流 。 对 “. son2” 设 置 宽度 也 有 同样 的 效果 。 

提示 : 为 避免 出 现 上 述 IE 和 Firefox 显示 不 一 致 的 情况 发 生 , 不 要 对 未 浮动 盒子 设 
置 width 和 height 值 , 如 果 要 控制 未 浮动 盒子 的 宽度 ,可 以 对 它 的 外 围 容器 设置 宽度 。 
表 4-5 对 浮动 的 浏览 器 显示 问题 进行 了 总 结 。 
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图 4-70” 当 对 未 浮动 的 盒子 设置 宽 或 高 后 ,Firefox 和 IE 中 显示 的 差异 


表 4-5 浮动 的 浏览 器 显示 问题 总 结 
情 况 未 浮动 的 盒子 不 设置 宽 或 高 对 未 浮动 的 盒子 设置 宽 或 高 





盒子 浮动 ,其 外 层 盒子 未 浮动 。 | ， 上 这 时 | 正 译 动 仗 子 将 不 会 脱离 标准 流 ， 
是 和 ee 国王 本 并 加 |Firefox 学 动 例子 仍 然 是 脱离 标准 
盒子 浮动 ,后 面相 邻 盒子 未 浮动 流 的 











4. 浮动 的 浏览 器 解释 综合 问题 


在 下 面 的 代码 中 ,第 一 个 盒子 浮动 ,第 二 个 盒子 未 浮动 ,而 且 对 两 个 盒子 都 设置 了 高 
度 和 宽度 ,两 个 盒子 大 小 相等 ,代码 如 下 ,显示 效果 如 图 4-71 所 示 , 请 分 别 解释 在 IE 和 
Firefox 中 为 什么 会 有 这 样 的 效果 。 


< style type= "text/css"> 

#a,#b { 
background- color:#ff9; 
margin: 10px; height: 40px; width: 80px; 
border: Sw solid #009;} 

#a{ 
float: left; } 

body { border: lpx dashed red; } 

< /style> 

<body> <div id "a"> Box- RK /div> 
<div jd "b"> Box- Px /div> < /body> 
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下 可 


文件 四 编辑 到 ) 查看 W ”| 链接 











图 4-71 左边 是 下 6 中 的 显示 效果 ,右边 是 Firefox 中 的 显示 效果 


(1) 在 I 6 中 ,一 个 盒子 浮动 ,对 它 后 面 未 浮动 的 盒子 设置 了 宽 或 高 时 ,浮动 的 盒子 
将 不 会 脱离 标准 流 ,仍然 占据 原来 的 空间 ,因为 对 未 浮动 的 盒子 了 设置 了 高 度 和 宽度 ,所 
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以 A 仍然 占据 原来 的 空间 ,B 就 只 能 排 在 它 后 面 了 。 


(2) 在 Firefox 中 ,浮动 的 盒子 总 是 脱离 标准 流 , 不 占据 空间 ,所 以 盒子 B 视 A 不 存 
在 ,移动 到 了 盒子 A 的 位 置 , 由 于 A、B 大 小 相等 ,盒子 B 正好 被 盒子 A 挡住 。 而 未 浮动 
盒子 的 内 容 将 环绕 浮动 的 盒子 ,所 以 B 的 内 容 “Box-B” 将 环绕 盒子 A。 由 于 对 盒子 B 设 
置 了 宽度 ,B 的 内 容 *Box-B” 只 能 移 到 盒子 A 下 面 去 了 ,B 的 内 容 和 盒子 A 之 间 的 距离 是 
盒子 A 的 margin 值 。 在 Firefox 中 ,对 设置 了 高 度 的 盒子 ,盒子 高 度 不 会 自动 伸展 ,所 以 
盒子 B 的 内 容 就 跑 到 它 的 外 面 去 了 。 

如 果 要 使 该 例 中 的 代码 在 两 个 浏览 器 中 显示 效果 相似 , 可 设置 # b {overflow: 
hidden;) ,通过 溢出 属性 清除 盒子 A 浮动 对 B 的 影响 。 具体 原 理 请 参考 4.7.6 节 。 


5. IE 6 浮动 元 素 的 双 倍 margin 错误 


在 IE 6 中 ,只 要 设置 元 素 浮 动 , 则 设置 左 浮动 ,盒子 的 左 margin 会 加 倍 , 设 置 右 浮 
动 ,盒子 的 右 margin 会 加 倍 。 这 是 下 6 的 一 个 bug(IE 7 已 经 修正 了 这 个 bug)。 在 图 4-69 
中 IE 6 与 Firefox 显示 效果 的 差别 就 是 因为 这 个 问题 造成 的 。 

由 于 两 个 元 素 的 盒子 是 从 margin 开始 对 齐 的 ,在 Firefox 中 ,Box-l 和 Box-2 的 
margin 相等 ,所 以 它们 的 左边 框 也 是 重合 的 。 而 在 IE 6 中 ,Box-l 由 于 左 浮动 导致 左 
margin 加 倍 , 如 图 4-72 所 示 , 所 以 它 的 边框 就 向 右 偏 移 了 一 个 margin 的 距离 。 


Box-2 的 margin 





图 4-72 IE6 双 倍 margin 导致 的 Box-l 向 右 偏 移 


如 果 将 Box-2 的 margin 重新 定义 为 0(. son2{margin:0;)), 则 Box-2 的 边框 会 向 左 
移 一 个 margin 的 距离 ,这 时 可 以 更 清楚 地 看 到 IE 6 中 的 双 倍 margin 错误 ,在 Firefox 和 
IE 6 中 的 如 图 4-73 所 示 。 

















图 4-73 IE 6 双 倍 margin 错误 


解决 IE 6 双 倍 margin 错误 的 方法 很 简单 ,只 要 对 浮动 元 素 设置 “display:inline;” 就 
可 以 了 。 代 码 如 下 : 


@_W. 准 网 页 设计 与 PHP 


-sonl{ float:left; display:inline; } 





提示 : 即使 对 浮动 元 素 设 置 “display:inline;”, 它 仍然 会 以 块 级 元 素 显 示 , 因 为 设置 
元 素 浮动 后 元 素 总 是 以 块 级 元 素 显示 的 。 

当然 ,也 可 以 不 设置 浮动 盒子 的 margin, 而 设置 其 父 元 素 盒子 的 padding 值 来 避免 这 
个 问题 ,在 实际 应 用 中 ,可 以 设置 padding 的 地 方 尽量 用 padding ,而 不 要 用 margin 。 








> 到 工 人 ) 图 文 混 排 效 果 - Wozrilla Firefox | 

4.6.4 浮动 的 应 用 举例 文件 四 编辑 四) 查看 WW 历史 G) 书签 @) 工具 下 
1 图 文 混 排 及 首 字 下 沉 效果 竺 ne 
: ; 是 一 个 生性 区 耳 的 族群 。“ 半 人 
(1) 如 果 将 一 个 盒子 浮动 , 另 一 个 盒子 不 |; 站 得” 代表 痢 理性 与 非 理性 、 人 
浮动 ,那么 浮动 的 盒子 将 被 未 浮动 盒子 的 内 | Ra 
容 所 包围 。 如 果 这 个 浮动 的 盒子 是 图 像 元 | 一。 人马 族 时 只 和 的 一 个 例外 一 


J se 奇 伦 ， 奇 伦 虽 也 是 人 马 族 的 一 
素 ,而 未 浮动 的 盒子 是 一 段 文本 ,那么 就 实现 。 | 员 ， 但 生性 均 良 对待 朋友 万 以 坦率 著称 ， 所 以 奇 伦 在 族 


了 图 文 混 排 效果 。 代 码 如 下 ,效果 如 图 4-74 | | 分 骂人 下 
所 示 。 图 4-74 图 文 混 排 效 果 


< style type= "text/css"> 
jimgf 
border:1lpx gray dashed; 
margin:10px 10px 10px 07 
Padding: Spx; 
float:left; /* 设置 图 像 元 素 浮动 * / 
p{ margin:0; 
font:14px/1.5 宋体"; 
text- indent: 2em; } 
< /style> 
< img src= "images/sheshou.jpg" /> 
< 户 在 遥远 古 希 腊 的 大 草原 中 , 驰 怠 着 一 批 半 人 半 兽 的 族群 ,这 是 一 个 生性 凶猛 的 族群 ," 半 人 半 
兽 " 代 表 着 理性 与 非 理 性 、 人 性 与 兽性 间 的 矛盾 挣扎 ,这 就 是 "人 马 族 "。< /p> 
<g 户 人 马 族 里 唯 独 的 一 个 例外 一 一 奇 伦 。 奇 伦 虽 也 是 人 马 族 的 一 员 ,但 生性 善良 ,对 待 朋 友 尤 以 坦 
率 著称 ,所 以 奇 伦 在 族 里 十 分 受 人 尊敬 < /p> 


(2) 在 图 文 混 排 的 基础 上 让 第 一 个 汉字 也 浮动 ,同时 变 大 , 则 出 现 了 首 字 下 沉 的 效 
果 ,关键 代码 如 下 ,效果 如 图 4-75 所 示 。 


.firstIetter{ 
fent- size:3em; 
float:left; } 
<p><span class= "firstIetter> 在 < /span> 遥 远 的 古 希 腊 大 草原 中 …… 。 </ 


对 于 首 字 下 沉 效果 ,也 可 以 使 用 伪 对 象 选择 器 p:first-letter 来 选中 段落 的 第 一 个 字 
符 , 这 样 就 不 需要 用 二 span 二 标记 将 段落 的 第 一 个 汉字 括 起 来 了 。 
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(3) 如 果 将 第 一 个 段落 浮动 , 则 出 现 了 文章 导读 框 效果 ,代码 如 下 ,效果 如 图 4-76 


所 示 。 


pt 

margin:0; 
font— size:14px7 Jine height:1.5; 
text- indent: 2em; } 

-pl{ 
width:160px; 
float:left; 
margin:10px 10px 0 07 
padding:10px; 
border:3px gray double; 
background:#9BD; } 


/* 双 


线 边框 * / 


<p class="p1"> 在 愧 远 的 古 希 腊 大 草原 中 , 驰 鸡 着 一 批 半 人 半 兽 的 族群 ,这 是 一 个 生性 凶猛 的 族群 。 


< 
<E>“ 半 人 半 兽 "代表 着 理性 与 非 理性 








通 远 的 古 腊 大 草原 
在 驰 验 着 一 批 半 人 半 

兽 的 族群 ， 这 是 一 个 生 
1 性 D 括 的 族群 。 “ 半 人 半 钼 > 
; 代表 着 理性 与 非 理性 、 人 性 与 
; 兽性 间 的 矛盾 挣扎 ， 这 就 是 “ 
;人马 族 ”。 
人 马 族 里 唯 独 的 一 个 例外 -- 奇 
| 他 奇 伦 虽 也 是 人 马 族 的 一 员 ， 但 生性 善良 ， 对 待 朋友 
尤 以 坦率 著称 ， 所 以 奇 伦 在 族 里 十 分 受 人 尊敬 











图 4-75 首 字 下 沉 和 图 文 混 排 效果 


导读 框 效果 





“ 半 人 半 甸 ”代表 
着 理性 与 非 理 性 、 人 性 
与 曾 性 间 的 矛盾 挣扎， 
| 这 就 是 “人 马 族 ”。 人 
马 族 里 唯 独 的 一 个 例外 





一 奇 伦 ， 奇 伦 虽 也 是 人 
马 族 的 一 员 ， 但 生性 善良 ， 对 待 朋友 尤 以 坦率 著称 ， 所 
| b+ 分 受 人 可 





图 4-76 导读 框 效 果 


从 以 上 例子 可 以 看 出 ,网 页 中 无 论 是 图 像 还 是 文本 ,对 于 任何 元 素 ,在 排版 时 都 应 视 
为 一 个 盒子 ,而 不 必 在 乎 元 素 的 内 容 是 什么 。 


2. 菜单 的 坚 横 转 换 


在 4.4.3 节 中 ,我 们 利用 元 素 的 盒子 模型 制作 了 一 个 竖 直 导航 条 。 如 果 要 把 这 个 上 
直 导 航 条 变 为 水 平 导航 条 ,只 要 设置 所 有 a 元 素 浮动 就 可 以 了 ,这 是 因为 所 有 盒子 浮动 ， 


就 能 实现 水 平 排列 。 当 然 水 平 导航 条 一 
如 图 4-77 所 示 。 它 的 结构 代码 如 下 : 


图 4-7 


<div id "nav> 


般 不 需 设置 宽度 ,可 以 把 width 属性 去 掉 。 效 果 





7 水 平 导 航 条 
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<ahre 伍 哇 吃 首 页 </a><ahre 人 三 哇 吃 中 心 简介 </a> 

<ahre 人 虽 "> 政策 法 规 </a> <a hre 伍 叶 吃 常用 下 载 < /a> 

<ahre 全 只 喧 为 您 服务 < /a> <a hre 伍 哇 吃 技术 支持 和 服务 < /a> 
</div> 


CSS 样式 代码 如 下 : 





< style type= "text/css"> 
#nav{ 
font- size: 14px;} 
#nava { 
Color: red; 
background- color: #9CF7 
text- align: oanter; 
text- decoration: none; 
display: block; 
Padding:6Px 10px dp; 
margin:0 2Fm; /* 设置 了 左右 边界 ,使 两 个 a 元 素 间 有 4 的 水 平 间距 * / 
border: lrx solid #39F7 


float:left; /* 使 a 元 素 浮动 ,实现 水 平 排列 x / } 
#nav a:hover { 

color: White; 

background- color: #930; } 
</style> 


3. 制作 栏目 框 标题 栏 


有 时 需要 制作 如 图 4-78 所 示 的 栏目 框 标 题 栏 , 标 题 栏 的 左 端 是 栏目 标题 , 右 端 是 
more 之 类 的 链接 。 如 何 将 文字 分 别 放 置 在 一 个 盒子 的 左右 两 端 呢 ? 


| 栏目 标题 1 more 


图 4-78 栏目 框 标题 栏 





最 简单 的 办 法 就 是 设置 左边 的 文字 左 浮动 .右边 的 文字 右 浮动 。 这 时 由 于 两 个 盒子 
都 浮动 ,不 占据 外 围 容 器 的 空间 ,所 以 必须 设置 外 围 盒 子 的 高 度 , 使 它 在 视觉 上 能 包含 住 
两 个 浮动 的 盒子 。 结 构 代 码 如 下 : 
<h3 icF "colframe"> 
< span class= "title"> 栏 目标 题 ]< /span> 
< span class= "more"> more< /span> 
< /hb3> 


CSS 代码 如 下 : 


#colframe { 
width:300px; 
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margin:0 auto; 
border:1px gray solid; 
height :24px; /* 由 于 浮动 元 素 脱离 了 外 围 容 器 ,必须 使 外 围 盒 子 高 度 伸展 * / 
background- color:#00000C; 
pacding- top:l0px; 。 ”/* 使 文字 垂直 居中 * / 
} 
#colframe span.title{ 
float:left; 
Pacding left:16rx; ， 
#colframe span.more{ 
float:right; 
padding- right:12px;  } 
另 一 种 方法 是 让 右边 的 元 素 不 浮动 ,而 是 把 它 设置 为 块 级 元 素 , 这 样 该 元 素 的 盒子 就 
能 伸展 到 整 行 ,而 浮动 元 素 位 于 其 左边 ,再 设置 它 的 内 容 右 对 齐 , 则 效果 一 样 。 更 改 的 代 
码 如 下 : 


#colframe span.more{ 
display:block; 
text- align:right; 
padding- right:12px; } 
第 三 种 方法 是 将 栏目 标题 写 在 more 的 后 面 , 再 设置 more 右 浮动 即 可 ,要 注意 的 是 ， 
这 种 方法 必须 将 more 写 在 前 面 ,否则 浮动 元 素 会 换行 。 
结构 代码 如 下 : 
<ha id "coltitle"> 
< span class= "more"> >more< /span> 师 生 美文 
< /hb3> 
CSS 样式 代码 如 下 : 


#coltitle span.more{ 
float:right; 
Padding- right:12px; } 
栏目 中 的 新 闻 标题 和 发 布 时 间 也 是 采用 这 种 方式 实现 两 端 对 齐 的 。 
4.1-3-1 固定 宽度 布局 


在 默认 情况 下 ,div 作为 块 级 元 素 是 占 满 整 行 从 上 到 下 依次 排列 的 ,但 在 网 页 的 分 栏 
布局 中 (例如 1-3-1 固定 宽度 布局 ) ,中 间 三 栏 (三 个 div 盒子 ) 必 须 从 左 到 右 并 列 排列 ,这 
时 就 需要 将 这 三 个 div 盒子 都 设置 为 浮动 。 

但 三 个 div 盒子 都 浮动 后 ,只 能 浮动 到 窗口 的 左边 或 右边 ,无 法 在 浏览 器 中 居中 。 因 
此 需要 在 三 个 div 盒子 外 面 再 套 一 个 盒子 ( 称 为 container) .让 container 居中 ,这样 就 实 
现 了 三 个 div 盒子 在 浏览 器 中 居中 ,如 图 4-79 所 示 。 
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-. 





container 


content 








图 4-79 ”1-3-1 布局 示意 图 








注意 : 对 于 Firefox 来 说 ,由 于 container 里 面 的 三 个 盒子 都 浮动 ,脱离 了 标准 流 , 所 
以 都 没有 占据 container 容器 的 空间 。 从 结构 上 看 ,应 该 是 container 位 于 三 个 盒子 的 上 
方 , 但 这 并 不 妨碍 用 container 控制 里 面 浮动 的 盒子 居中 。 由 于 container 占据 的 高 度 为 
0, 所 以 在 Firefox 等 浏览 器 中 的 都 看 不 到 container 的 存在 。 而 对 于 IE 来 说 ,由 于 
container 一 般 设置 了 宽度 ,作为 网 页 的 宽度 ,所 以 在 IE 中 container 会 包含 住 三 个 盒子 。 
下 面 是 1-3-1 固定 宽度 布局 的 参考 实现 代码 。 效 果 如 图 4-80 所 示 。 


< style type= ”text/css”> 
#heager, #pagefooter, #container{ 


margin:0 auto; /x¥ 与 width 配合 实现 水 平 居中 * / 
width:772px7 
border: lpx dashed #FF0000; /* 添加 边框 为 演示 需要 * / 

} 

#navi,#content,#sige{ 
border:2px solid #0066FF; /* 添加 边框 为 演示 需要 * / 
float:left; /* 设置 三 栏 都 浮动 * / 
width:200px; /< 设置 三 栏 的 宽度 * / 

} 

#content{ 
width:360px; /* 重新 定义 中 间 一 栏 的 宽度 * / 
} 

#pagefooter{ 
clear:both; /* 清除 浮动 ,防止 中 间 三 列 不 等 高 时 页 脚 项 上 去 * / 

} 

</style> 

<body> 


<div id ”header” > id ”heagder”< /div> 
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<div id ”oontainer”> 
<div id ”navi”> id ”navi”< /div> 
<div id "content"> id ”content"< /div> 
<div id "side"> id ”siqe"< /div> 
</div> 
<div id ”pagefooter” > id "pagefooter"< /div> 
< /pody> 








图 4-80 1-3-1 浮动 方式 布局 效果 图 


制作 1-3-1 浮动 布局 的 方法 有 很 多 种 ,实际 上 还 可 以 将 pagefooter 块 放 到 container 
块 里 面 ,这 样 设置 pagefooter 清除 浮动 后 ,在 IE 6 和 Firefox 中 就 都 是 container 块 包含 
住 里 面 的 三 列 和 pagefooter 块 了 。 

提示 : 注意 本 例 中 浮动 的 三 列 #navi、# content 和 #side 都 没有 设置 margin 属性 ， 
如 果 要 为 三 列 设置 margin 属性 ,以 使 三 列 之 间 有 间隙 , 则 最 好 给 三 列 都 增加 一 条 
display:inline 的 属性 ,否则 IE 6 浏览 器 会 出 现 浮动 盒子 的 双 倍 margin 问题 ,导致 最 后 一 
列 容纳 不 下 而 移 到 下 一 行 去 。 


4.7 相对 定位 和 绝对 定位 


利用 浮动 属性 定位 只 能 使 元 素 浮 动 形成 图 文 混 排 或 块 级 元 素 水 平 排列 的 效果 ,其 定 
位 功能 仍 不 够 灵活 强大 。 本 节 介 绍 的 在 定位 属性 下 的 定位 能 使 元 素 通 过 设置 偏 移 量 定 位 
到 页 面 或 其 包含 框 的 任何 一 个 地 方 ,定位 功能 非常 灵活 。 


4.7.1 定位 属性 和 偏 移 属性 


为 了 让 元 素 在 定位 属性 下 定位 ,需要 对 元 素 设 置 定位 属性 position, position 的 取 值 
有 四 种 , 即 relative、absolute ,fixed 和 static。 其 中 static 是 默认 值 , 表 示 不 使 用 定位 属性 
定位 ,也 就 是 盒子 按照 标准 流 或 浮动 方式 排列 。fixed 称 为 固定 定位 , 它 和 绝对 定位 类 似 ， 
只 是 总 是 以 浏览 器 窗口 为 基准 进行 定位 ,但 IE 6 浏览 器 不 支持 该 属性 值 。 因 此 定位 属性 
的 取 值 中 用 得 最 多 的 是 相对 定位 (relative) 和 绝对 定位 (absolute) ,本 节 主 要 介绍 它们 的 
作用 。 

偏 移 属性 是 指 top \left\bottom ,right 四 个 属性 ,为 了 使 元 素 在 定位 属性 下 从 基准 位 
置 发 生 偏 移 , 偏 移 属性 必须 和 定位 属性 配合 使 用 ,left 指 相 对 于 定位 基准 的 左边 向 右 偏 移 
的 值 ,top 指 相 对 于 定位 基准 的 上 边 向 下 偏 移 的 量 。 它 们 的 取 值 可 以 是 像素 或 百 分 
比 。 如 : 
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#mydiv { 
position:fixed; 
left: 50%; 
top: 30px; } 
注意 ; 偏 移 属性 仅 对 设置 了 定位 属性 的 元 素 有 效 。 
4.7.2 相对 定位 


使 用 相对 定位 的 盒子 的 位 置 依据 常 以 标准 流 的 排版 方式 为 基础 ,然后 使 盒子 相对 于 
它 原 来 的 标准 位 置 偏 移 指定 的 距离 。 相 对 定位 的 盒子 仍 在 标准 流 中 , 它 后 面 的 盒子 仍 以 
标准 流 方 式 对 待 它 。 

如 果 对 一 个 元 素 定 义 相 对 定位 属性 (position: relative;) ,那么 它 将 保持 在 原来 的 位 
置 上 不 动 。 如 果 再 对 它 通 过 top ,left 等 属性 值 设置 垂直 或 水 平 偏 移 量 , 那 么 它 将 “相对 
于 ” 它 原 来 的 位 置 发 生 移动 。 例 如 图 4-81 中 的 em 元 素 就 是 通过 设置 相对 定位 再 设置 位 
移 让 它 “ 相 对 于 ”原来 的 位 置 向 左下 角 偏 移 , 同 时 它 原 来 的 位 置 仍然 不 会 被 其 他 元 素 占 据 。 
代码 如 下 : 





em { 

background- color: #0099FF7 

Position: relative; 

left: 60px; 

top: 30px; } 
pl 

Padding: 25px; 

border: 2px solid #933; background- color: #dbfdba;} 
< 户 在 远古 时 代 ,<ar> 人 类 与 神 都 同样 居住 在 地 上 < /ez ,一 起 过 着 和 平 快乐 的 日 子 , 可 是 人 类 愈 来 
愈 聪明 ,不 但 学 会 了 建 房子 . 铺 道路 ,还 学 会 钩 心 斗 角 .欺骗 等 等 不 好 的 恶习 , 搞 得 许多 神仙 都 受 不 
了 ,纷纷 离开 人 类 , 回 到 天 上 居住 。< /> 


相对 定位 - Worzilla Firefoz 


子 、 铺 道路 ,! 还 学 会 习 ， 
A 纷纷 离开 人 类 ， 回 到 天 上 居 





图 4-81 设置 em 元素 为 相对 定位 


可 以 看 到 元 素 设置 为 相对 定位 后 有 两 点 会 发 生 : 

(1) 元 素 原来 占据 的 位 置 仍然 会 保留 ,也 就 是 说 ,相对 定位 的 元 素 未 脱离 标准 流 ; 
(2) 因为 是 使 用 了 定位 属性 的 元 素 , 所 以 会 和 其 他 元 素 发 生 重要 。 

设置 元 素 为 相对 定位 的 作用 可 归纳 为 两 种 : 一 是 让 元 素 相 对 于 它 原来 的 位 置 发 生 位 
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移 , 同 时 不 释放 原来 占据 的 位 置 ;二 是 让 元 素 的 子 元 素 以 它 为 定位 基准 进行 定位 ,同时 它 
的 位 置 保持 不 变 , 这 时 相对 定位 的 元 素 成 为 包含 框 ,一 般 是 为 了 帮助 里 面 的 元 素 进行 绝对 
定位 。 
4.7.3 相对 定位 的 应 用 举例 
1. 鼠标 滑 过 时 向 右 下 偏 移 的 链接 


在 有 些 网 页 中 , 当 鼠 标 滑动 到 超 链接 上 方 时 , 超 链接 的 位 置 会 发 生 细 微 的 移动 ,如 向 
左下 方 偏 移 , 让 人 觉得 链接 被 鼠标 拉 上 来 了 ,如 图 4-82 所 示 。 


首 页 中 心 简 介 下 测 寺 常用 下 载 为 您 服务 





图 4-82 偏 移 的 超 链接 ( 当 鼠 标 悬 停 时 向 左下 方 偏 移 ) 


这 种 效果 的 制作 原理 其 实 很 简单 ,主要 就 是 运用 了 相对 定位 。 在 CSS 中 设置 a 元 素 
为 相对 定位 , 当 鼠 标 滑 过 时 ,就 让 它 相 对 于 原来 的 位 置 发 生 偏 移 。CSS 代码 如 下 : 


a:hover { 
color: red; 
Position: relative; 
Tight: 2px; 
top: Ax; } 


还 可 以 给 这 些 链接 添加 盒子 ,那么 盒子 也 会 按 上 述 效果 发 生 偏 移 ,如 图 4-83 所 示 。 
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图 4-83 给 链接 添加 盒子 ,同样 会 偏 移 


2. 利用 相对 定位 制作 简单 的 阴影 效果 


在 4.5.3 节 中 ,即使 制作 如 图 4-48 所 示 的 简单 阴影 效果 都 需要 用 到 一 张 “ 左 上 边 ” 的 
图 片 。 我 们 可 以 利用 相对 定位 技术 ,不 用 一 张 图 片 也 能 制作 出 和 图 4-48 相同 的 简单 阴影 
效果 。 它 的 原理 是 在 img 元 素 外 套 一 个 外 围 容 器 ,将 外 围 容器 的 背景 设置 为 灰色 ,作为 
img 元 素 的 阴影 ,同时 不 设置 填充 边界 等 值 使 外 围 容 器 和 图 片 一 样 大 ,这 时 图 像 就 正好 把 
外 围 容器 的 背景 完全 覆盖 。 再 设置 图 像 相 对 于 原来 的 位 置 往 左 上 方 偏 移 几 个 像素 ,这 样 
图 像 的 右 下 方 就 露出 了 阴影 盒子 右边 和 下 边 部 分 的 背景 ,看 起 来 就 是 img 元 素 的 阴影 
了 。 代 码 如 下 ,效果 如 图 4-48 所 示 。 

.Shadow img { 

Padding: ex; 

border: lrx solid #465B68; 
background- color: #fff; 
Positicn: relative; 
left: - Sx; 


®@_W.. 准 网 页 设计 与 PHP 


top: - x; } 
div.shagow { 

background- color: #00c; 

float:left; /* 使 div 盒子 收缩 ,和 img 一 样 大 */  } 
<div class= "shadow"> < img src= "works.jpg" />< /div> 





3. 固定 宽度 网 页 居中 的 相对 定位 法 


使 用 相对 定位 法 可 以 实现 固定 宽度 的 网 页 居中 ,该 方法 首先 将 包含 整个 网 页 的 包含 
框 container 进行 相对 定位 使 它 向 右 偏 移 浏 览 器 宽度 的 50%, 这 时 左边 框 位 于 浏览 器 中 
线 的 位 置 上 ,然后 使 用 负 边 界 将 它 向 左 拉 回 整个 页 面 宽度 的 一 半 , 如 图 4-84 所 示 , 从 而 达 
到 水 平 居 中 的 目的 。 代 码 如 下 : 


left: 50% left: 50% 








图 4-84 相对 定位 法 实现 网 页 居中 示意 图 


#container { 
position:relative; 
width:760px7 
left:50%; 
margin- left:- 380px; 
这 段 代 码 的 意思 是 ,设置 container 的 定位 是 相对 于 它 原来 的 位 置 ,而 它 原来 默认 的 
位 置 是 在 浏览 器 窗口 的 最 左边 ,然后 将 其 左边 框 移动 到 浏览 器 的 正中 央 , 这 是 通过 "left: 
50% ”实现 的 ,这 样 就 找到 了 浏览 器 的 中 线 。 青 使 用 负 边 界 法 将 盒子 的 一 半 宽 度 从 中 线 位 
置 拉 回 到 左边 ,从 而 实现 了 水 平 居中 。 
想 一 想 : 如 果 把 井 container 选择 器 中 的 “left: 50%; margin-left:-380px;” 改 为 
“right:50%; margin-right: -380px;”, 还 能 实现 居中 吗 ? 
另外 ,大 家 知道 div 中 的 内 容 默 认 情 况 下 是 顶端 对 齐 的 ,有 时 希望 div 中 内 容 垂直 居 
中 ,如 果 div 中 只 有 一 行内 容 , 可 以 设置 div 的 高 度 height 和 行 高 line-height 相等 。 而 如 
果 div 中 有 多 行内 容 , 更 一 般 的 方法 就 是 上 面 这 种 相对 定位 的 思想 ,把 div 中 的 内 容 放 入 
到 一 个 子 div 中 ,让 子 div 相对 于 父 div 向 下 偏 移 50% ,这 样子 div 的 顶部 就 位 于 父 div 的 
垂直 中 线 上 ,然后 再 设置 子 div 的 margin-top 为 其 高 度 一 半 的 负 值 。 


4.7.4 绝对 定位 
绝对 定位 是 指 盒子 的 位 置 以 它 的 包含 框 为 基准 进行 定位 。 绝 对 定位 的 元 素 完全 脱离 
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标准 流 中 。 这 意味 着 它们 对 其 他 元 素 的 盒子 定位 没有 影响 ,其 他 的 元 素 就 好 像 这 个 绝对 
定位 元 素 完全 不 存在 一 样 。 

注意 : 绝对 定位 是 以 它 的 包含 框 的 边框 内 侧 为 基准 进行 定位 的 ,因此 改变 包含 框 的 
填充 值 不 会 对 绝对 定位 元 素 的 位 置 造成 任何 影响 。 

绝对 定位 的 偏 移 值 是 指 从 它 的 包含 框 边框 内 侧 到 元 素 的 外 边界 之 间 的 距离 ,如 果 修 
改元 素 的 margin 值 会 影响 元 素 内 容 的 显示 位 置 。 

例如 ,如 果 将 相对 定位 例子 中 的 em 的 定位 属性 值 由 relative 改 为 absolute, 那 么 em 
将 按照 绝对 定位 方式 进行 定位 ,从 图 4-85 中 可 以 看 出 它 将 以 浏览 器 左上 角 为 基准 定位 ， 
配合 left top 属性 值 进行 偏 移 , 同 时 em 元 素 原 来 所 占据 的 位 置 将 消失 ,也 就 是 说 , 它 脱离 
了 标准 流 , 其 他 元 素 当 它 不 存在 了 一 样 。em 选择 器 的 代码 如 下 : 


) 红 对 定位 - Woerzilla Fi 





大 乐 的 EE 可 是 人 类 


名 来 昂 隐 明 ， 外 但 学 会 了 建 房子 、 铺 道路 ， 还 学 会 匆 
心 斗 角 、 欺 骗 等 等 不 好 的 恶习 和 2 
了 ,纷纷 离开 人 类 ， 回 到 天 上 居住 





图 4-85 设置 em 元 素 为 绝对 定位 


background- color: #0099FF; 
Position:absolute; 
left: 60px; 
top: 30px; } 
但 要 注意 的 是 ,设置 为 绝对 定位 (position:absolute; ) 的 元 素 ,并 非 总 是 以 浏览 器 窗口 
为 基准 进行 定位 的 。 实 际 上 ,绝对 定位 元 素 是 以 它 的 包含 框 为 基准 进行 定位 的 ,所 谓 包含 
框 ,是 指 距离 它 最 近 的 设置 了 定位 属性 的 父 级 元 素 的 盒子 。 如 果 它 所 有 的 父 级 元 素 都 没 
有 设置 定位 属性 ,那么 包含 框 就 是 浏览 器 窗口 。 
下 面 对 em 元 素 的 父 级 元 素 p 设置 定位 属性 ,使 p 元 素 成 为 em 元 素 的 包含 框 。 这 
时 ,em 元 素 就 不 再 以 浏览 器 窗口 为 基准 进行 定位 了 ,而 是 以 它 的 包含 框 p 元 素 的 盒子 为 
基准 进行 定位 ,效果 如 图 4-86 所 示 。 
对 应 的 CSS 代码 如 下 : 


pl 
background- color: #dbfdba; 
Padaing: 25px; 
Position:relative; /* 让 p 元 素 成 为 包含 框 * / 
border: 2px solid #6c4788; 攻 
em { 
background- color: #0099FF; 
Position:absolute; 


®@_W.. 准 网 页 设计 与 PHP 


left: 60px7 
top: 40px; } 





:) 相对 定位 和 绝对 定位 配合 合用 - Norille Firefox 本 x| 
文件 四 编辑 到 ) 查看 外 © 忆 答 @ I 具 W | 








愈 米 由 取 胡 ， 铺 道 路 还 学 
心 斗 角 、 央 请 等 等 术 如 的 下 习 ， 所 得 许多 入 人 过 不 
了 ， 纷纷 离开 人 类 ， 回 到 天 上 居住 


图 4-86 设置 em 为 绝对 定位 同时 设置 p 为 相对 定位 


上 述 代码 就 是 相对 定位 和 绝对 定位 配合 使 用 的 例子 ,这 种 方式 非常 有 用 ,可 以 让 子 元 
素 以 父 元 素 为 定位 基准 进行 定位 。 
表 4-6 对 相对 定位 和 绝对 定位 的 特点 进行 了 比较 。 


表 4-6 相对 定位 和 绝对 定位 的 比较 











相对 定位 (relative) 绝对 定位 (absolute) 
,光志 实 所 来 的 位 澡 | 元 素 以 虐 离 它 最 近 的 设置 了 定位 属性 的 父 级 元 素 为 定位 
定位 基准 基准 , 若 它 所 有 的 父 级 元 素 都 没 设置 定位 属性 , 则 以 浏览 
器 窗口 为 定位 基准 
大 末 的 位 置 | 还 占用 着 原来 的 位 置 ，| 不 占用 其 原来 的 位 置 ,已 经 脱离 标准 流 , 其 他 元 素 就 当 它 
未 脱离 标准 流 不 存在 一 样 
宽度 盒子 的 宽度 不 会 收缩 “| 会 子 的 宽度 会 自动 收缩 








4.7.5 绝对 定位 的 应 用 举例 


绝对 定位 元 素 的 特点 是 完全 脱离 了 标准 流 , 不 占据 网 页 中 的 位 置 ,而 是 浮 在 网 页 上 。 
利用 这 个 特点 ,绝对 定位 可 以 制作 漂浮 广告 .弹出 菜单 等 浮 在 网 页 上 的 元 素 。 如 果 和 希望 绝 
对 定位 元 素 以 ba 则 需要 对 它 的 父 元 素 设置 定位 属性 (一 般 都 是 设置 
为 相对 定位 ) ,使 它 的 父 元 素 成 为 包含 框 ,这 就 是 绝对 定位 和 相对 定位 的 配合 使 用 。 这 样 
Cs we wa 


1. 制作 缺 角 的 导航 条 


图 4-87 是 一 个 缺 角 的 导航 条 ,这 是 一 个 利用 定位 基准 和 绝对 定位 技术 结合 的 典型 例 
子 , 下 面 来 分 析 它 是 如 何 制 作 的 。 


图 4-87 缺 角 的 导航 条 


首先 ,如 果 这 个 导航 条 没有 缺 角 ,那么 这 个 水 平 导航 条 完全 可 以 通过 盒子 在 标准 流 及 
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浮动 方式 下 的 排列 来 实现 ,不 需要 使 用 定位 属性 。 其 次 , 缺 的 这 个 角 是 通过 一 个 元 素 的 盒 
子 侄 放 在 导航 选项 盒子 上 实现 的 ,它们 之 间 的 位 置 关系 如 图 4-88 所 示 。 


SS sx NN 中 心 简介 图 政策 法 规 NOT 


图 4-88 缺 角 的 导航 条 元 素 盒子 之 间 的 关系 

















形成 缺 角 的 盒子 实际 上 是 一 个 空 元 素 , 该 元 素 的 左边 框 是 8 像素 宽 的 白色 边框 ,下 边 


框 是 8 像素 宽 的 蓝 色 边 框 ,它们 交会 形成 了 斜 边 效果 ,如 
oe 0 
可 以 看 出 ,导航 项 左上 角 的 盒子 必须 以 导航 项 为 基准 


进行 定位 ,因此 必须 设置 导航 项 的 盒子 为 相对 定位 ,让 它 成 ”图 4-89 缺 角 处 是 一 个 左 白 、 
为 一 个 包含 框 , 然 后 将 左上 角 的 盒子 设置 为 绝对 定位 ,使 左 下 蓝 边 框 的 空 元 素 
上 角 的 盒子 以 它 为 基准 进行 定位 ,这 样 还 能 使 左上 角 盒 子 
不 占据 标准 流 的 空间 。 同 时 由 于 导航 条 不 需要 改变 在 标准 流 中 的 位 置 ,所 以 应 该 设置 为 
相对 定位 无 偏 移 。 

下 面 将 这 个 实例 分 解 成 几 步 来 做 : 

(1) 首先 写 出 结构 代码 ,我们 直接 用 a 元 素 的 盒子 做 导航 条 ,因为 a 元 素 里 面 还 要 包 
含 了 一 个 盒子 ,所 以 应 在 a 元 素 中 添加 任意 一 个 行内 元 素 , 这 里 选择 b 元 素 , 它 的 内 容 应 
为 空 ,这 样 才 能 利用 盒子 的 边框 交会 做 三 角形 。 结 构 代 码 如 下 : 

<div id- "nav4"> 

<ahref 伍 嘎 "><b></b> 首 页 </a> 
<ahre 伍 嘲 "><b>< /te> 中 心 简介 < /a> 


<ahref 伍 嘲 "><b>< /b> 技术 支持 < /a> 
</div> 
(2) 因为 要 设置 a 元 素 的 边框 填充 等 值 ,所 以 设置 a 元 素 为 块 级 元 素 显示 ,而 要 让 块 
级 元 素 水 平 排列 ,必须 设置 这 些 元 素 为 浮动 。 当 然 ,设置 为 浮动 后 元 素 将 自动 以 块 级 元 素 
显示 ,因此 也 可 以 将 a 元 素 的 “display:block;” 去 掉 。 同 时 ,要 让 a 元素 成 为 其 子 元 素 的 
包含 框 ,必须 设置 a 元 素 的 定位 属性 ,而 a 元 素 应 保持 它 在 标准 流 中 的 位 置 不 发 生 移动 ， 
所 以 a 元 素 的 定位 属性 值 应 为 relative。 因 此 .a 元 素 的 CSS 代码 如 下 





#nav4a { 
background- color: #79bcff7 
font- size: 14px; color: #333; 
text— decoration: none; 
border-bottcom:8px solid #990c00; /x* 以 上 5 条 为 普通 css 样 式 设置 * / 
display: block; 
float: left; 
Padaing: @rx 10px x 10px; 
margin:0 2px; 


@_—_W... 页 设计 与 PHP 


position:relative; /* 让 a 元 素 作为 b 元 素 的 定位 基准 * / } 
(3) 接 下 来 设置 b 元 素 为 绝对 定位 ,让 它 以 a 元 素 为 包含 框 进行 定位 。 由 于 b 位 于 a 
的 左上 角 , 必 须 设置 偏 移 属性 “left:0;” 和 “top:0;”。 由 于 b 元 素 还 没有 内 容 ,所 以 此 时 看 
不 见 b 元 素 。 再 设置 b 元 素 的 左边 框 为 白色 ,下 边框 为 a 元 素 的 背景 色 。 这 样 在 Firefox 
中 就 可 以 看 见 缺 角 的 导航 条 效果 了 。 为 了 在 IE 中 也 有 此 效果 ,需要 设置 “overflow: 
hidden;” 和 “height: 0px;”, 因 为 IE 在 默认 情况 下 ,设置 了 边框 属性 的 空 元 素 也 有 12px 
的 高 度 ,所 以 b 元 素 的 CSS 代码 如 下 : 








#nav4ab{ 
border- bottom: 8px solid #79bcff; 
border- left: 8px solid #ffffff; /x 左边 框 和 下 边框 交会 形成 三 角形 效果 * / 
cverflow: hiqdeny 


height: Opx; /* 以 上 两 条 为 了 兼容 正 6, 使 空 元 素 高 度 为 0x / 
Positicon: absolute; 

left:0; /* 相对 于 a 元 素 边框 内 侧 的 左上 角 定位 * / 
top:0; } 


(4) 最 后 为 导航 条 添加 交互 效果 ,只 需 设置 鼠标 经 过 时 a 元素 的 字体 、 背 景色 改变 ,b 
元 素 下 边框 颜色 改变 就 可 以 了 。 
#nav4 a:hover { 
Color: #c007 
background- color: #coc; 
border- bottom color: #cf3; } 
#nav4 a:hover b { 
border- bottam- color: #ccc; } 


这 样 ,这 个 缺 角 的 导航 条 就 制作 完成 了 。 网 上 还 有 很 多 这 种 带 有 三 角形 的 导航 条 , 例 
如 在 图 4-90 中 ,只 是 在 默认 状态 时 将 三 角形 隐藏 ,而 鼠标 滑 过 时 显示 三 角形 罢了 。 
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图 4-90 带 有 三 角形 的 导航 条 


2. 制作 小 提示 窗口 (4-6. html) 


我 们 知道 ,几乎 所 有 的 HTML 标记 都 有 一 个 title 属性 。 添 加 该 属性 后 , 当 鼠 标 停留 
在 元 素 上 时 ,会 显示 title 属性 里 设置 的 文字 。 但 用 title 属性 设置 的 提示 框 不 太美 观 。 实 
际 上 ,可 以 用 绝对 定位 元 素来 模拟 小 提示 框 ,由 于 这 个 小 提示 框 必须 在 其 解释 的 文字 旁边 
出 现 ,所 以 要 把 待 解释 的 文字 设置 为 相对 定位 ,作为 小 提示 框 的 定位 基准 。 

下 面 是 CSS 小 提示 框 的 代码 , 它 的 显示 效果 如 图 4-91 所 示 。 

< style type= "text/css"> 

a-tip{ 

Color:red; 
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text— decoration:none; 


position:relative; /* 设置 待 解释 的 文字 为 定位 基准 * / 
} 
atip span {display:none;} /* 默认 状态 下 隐藏 小 提示 窗口 * / 
a.tip:hover {cursor:hang; /* 当 鼠 标 滑 过 时 将 鼠标 指针 设置 为 手 形 * / 
Zr- index:999;} 
atip:hover .popbox { 
display:block; /* 当 鼠 标 滑 过 时 显示 小 提示 窗口 * / 
position:absolute; 
top:15px; 
left:— 30px; 
width:100px; /* 以 上 三 条 设置 小 提示 窗口 的 显示 位 置 及 大 小 * / 
background- color:#424242; 
Color:#fff; 
padding: 10px; 
Zr- index: 9999; /* 设置 很 大 的 层 释 值 防止 被 其 他 a 无 素 覆 盖 * / 


} 

p{ font- size: l4px; } 

</style> 

<body><p> Web 前 台 技 术 :<a href= 哇 " class= "tip"> Ajax< span class= "popbox"> ax 是 一 种 浏览 器 无 
刷新 就 能 和 Web 服务 器 交换 数据 的 技术 < /span>< /> 技术 和 

<a href= 4" class= "tip"> Css< span class= "popbox"> Cascading Style Sheets 层 番 样式 表 < /span> < /a> 
的 关系 < /p>< /body> 
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3. 制作 纯 CSS 下 拉 菜 单 文件 四 ”编辑 BE) 查看 WW) 历史 
YWeb 前 台 技 术 ，&jax 技 术 和 C55 的 关系 





下 拉 菜 单 是 网 页 中 常见 的 高 级 界面 元 素 ,过 去 下 拉 菜 
单一 般 都 用 JavaScript 制作 。 例 如 ,使 用 Dreamweaver 中 
的 “行为 ?或 在 Fireworks 中 “添加 弹出 菜单 "都 可 以 制作 下 
拉 菜 单 , 它 们 是 通过 自动 插入 JavaScript 代码 实现 的 ,但 这 图 4-91 小 提示 窗口 的 效果 
些 软 件 制 作 的 下 拉 菜 单 存在 代码 复杂 、 界 面 不 美观 等 缺 
点 ,因此 现在 更 推荐 使 用 CSS 来 制作 下 拉 菜 单 , 它 具 有 代码 简洁 、 界 面 美观 、 占 用 资源 少 

下 拉 菜 单 的 特点 是 弹出 时 浮 在 网 页 上 的 ,不 占据 网 页 空间 ,所 以 放置 下 拉 菜 单 的 元 素 
必须 设置 为 绝对 定位 元 素 ,而且 下 拉 菜 单 的 位 置 是 依据 它 的 导航 项 来 定位 的 ,所 以 导航 项 
应 该 设置 为 相对 定位 ,作为 下 拉 菜 单 的 定位 基准 。 在 默认 状态 下 ,设置 下 拉 菜 单元 素 的 
display 属性 为 none, 使 下 拉 菜 单 被 隐藏 起 来 。 当 鼠标 滑 到 导航 项 时 ,显示 下 拉 菜 单 。 

制作 下 拉 菜 单 的 步骤 比较 复杂 ,下 面 一 步 步 来 完成 : 

(1) 下 拉 菜 单 采 用 二 级 列表 结构 ,第 一 级 放 导航 项 ,第 二 级 放下 拉 菜 单项 。 首 先 写 出 
它 的 结构 代码 ,此 时 显示 效果 如 图 4-92 所 示 。 





<u icF "nav> 
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<1li><ahreE- "> 文 章 </a> 
<u> 
<li><ahre 伍 "> Ajax 教 程 </a></li> 





<li><ahre 仁 "> Flex 教 程 </a></li> 
</u> 
<V/1i> 
<li><ahref="> 参 考 </a> 
<u> 
<1i><ahreE- ™>E- cash< /a>< /li> 
<1i><ahre 人 "> 微 支付 < /a>< /li> 
<1i><ahre 人 "> 混沌 加 密 </a>< /li> 
</u> 
</li> 
<1li><ahref="">Blog /a> 
<u> 
<1li><ahre 人 "> 生活 随想 </a>< /li> 


<1li><ahre 人 "> 随意 写 </a></1i> 
</u> 
</li> 
</u> 


可 以 看 到 ,下 拉 菜 单 被 写 在 内 层 的 ul 里 ,只 需 控制 这 个 
ul 元 素 的 显示 和 隐藏 就 能 实现 下 拉 菜单 效果 。 

(2) 设置 第 一 层 i 为 左 浮动 ,这 样 导航 项 就 会 水 平 排列 ， 
同时 去 除 列表 的 小 黑 点 ,填充 和 边界 。 此 时 显示 效果 如 图 4-93 ”| “| 
所 示 。 青 设置 导航 项 fi 为 相对 定位 ,让 下 拉 菜 单 以 它 为 基准 ”图 4.92 下 拉 菜 单 基 本 结构 
定位 。 代 码 如 下 ， 











#nav, #nav ul { 
padding: 0; margin: 0; 
list- style: none; } 
it{ 
float: left; 
width: 160px; 
position:relative; } 





ee 随意 写 
图 4-93 下 拉 莱 单 水 平 排列 一 设置 第 一 级 i 左 浮动 
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(3) 设置 下 拉 菜 单 为 绝对 定位 ,位 于 导航 项 下 21px。 默 认 状 态 下 隐藏 下 拉 菜 单 ul， 
所 以 ul 默认 值 是 不 显示 的 。 
Latf 
display: mone; 
positicn: absolute; 
top: 21px; } 
再 添加 交互 , 当 鼠 标 滑 过 时 显示 下 拉 菜 单 ul。 此 时 在 Firefox 中 就 可 以 看 到 鼠标 滑 
过 时 弹出 下 拉 菜 单 的 效果 了 ,如 图 4-94 所 示 , 只 是 不 太美 观 。 
li:hover ul { /* 亚 6 不 支持 非 a 元 素 的 伪 类 , 故 正 6 不 显示 下 拉 菜 单 * / 
display: block; } 








图 4-94 添加 了 交互 的 下 拉 菜 单一 当 鼠 标 滑 过 时 显示 下 拉 菜 单项 


(4) 最 后 改变 下 拉 菜 单 的 CSS 样式 ,使 它 更 美观 ,并 添加 交互 效果 ,代码 如 下 。 最 终 
在 Firefox 中 的 效果 如 图 4-95 所 示 。 


uliaf 
display:block; 
font- size:14px; color: #333; /x* 设置 文字 效果 * / 
text- align:oanter; 
text- decoration: none; 
border: lrx solid #coc; 


Padding: 3rx; 

height :lem; /* 解 决 正 6 的 bugx/ 
} 
ul 1i a:hover{ 

background- color:#f4f4f47 

color:red; } 





下 拉 菜单 -最 终 效果 - mezilla 下 








图 4-95 对 下 拉 莱 单 进行 美化 后 的 效果 
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想 一 想 : 如 果 把 上 述 选 择 器 中 的 (position:relative;) 和 (position:absolute;) 都 去 掉 
还 会 有 上 面 的 下 拉 菜 单 效 果 吗 ? 会 出 现 什么 问题 呢 ? 

(5) 使 下 拉 菜 单 兼容 IE 6 浏览 器 的 基本 思想 。 

由 于 IE6 浏览 器 不 支持 li:hover 伪 类 ,所 以 无 法 弹出 菜单 。 一 种 兼容 IE 6 浏览 器 的 
方法 是 在 网 页 head 部 分 插入 下 面 一 段 JavaScript 代码 。 代 码 如 下 : 


< script> 
startList= function() { 
navRoot= document .getElementById ("nav"); 
pnode= navRoot .getElementsByTagName ("1i"); 
for(i=0; i<node.length; i++) { 
noge[i] .onmpusecver= function() { 
this.classNamet =" over"; //over 前 面 有 个 空格 不 能 省 略 
} 
node[i] .onmpusecut= function() { 
this.className= this.className.replace (/over/,"™"); 
1} 
window.onloacF startList; 
< /script> 


添加 一 个 CSS 选择 器 ,代码 如 下 。 使 JavaScript 能 动态 地 为 li 元素 添加 、 移 除 
“,over” 这 个 类 ,从 而 控制 li ul” 的 显示 和 隐藏 。 


li.over ul { display: block; } 





4， hover 伪 类 的 应 用 总 结 


hover 伪 类 是 通过 CSS 实现 与 页 面 交 互 的 最 主要 形式 ,本 节 的 所 有 实例 中 都 用 到 了 
hover 伪 类 ,下面 总 结 一 下 hover 伪 类 的 作用 。 

hover 伪 类 的 作用 有 两 种 : 一 是 定义 元 素 在 鼠标 滑 过 时 样式 的 改变 ,以 实现 动态 效 
果 , 这 是 hover 伪 类 的 基本 用 法 ,如 鼠标 滑 过 导航 项 时 让 导航 项 的 字体 和 背景 变色 等 。 

二 是 通过 hover 伪 类 控制 子 元 素 的 动态 效果 。 用 hover 伪 类 控制 元 素 的 子 元 素 又 可 
分 为 两 种 情况 : 

(1) 解决 IE 6 不 支持 非 a 元 素 hover 伪 类 的 问题 。 

由 于 IE 6 只 支持 a:hover 伪 类 ,如 果 要 给 其 他 元 素 添 加 动态 效果 ,就 可 以 在 该 元 素 
外 面 套 一 个 a 元 素 , 例 如 在 imsg 元 素 外 套 一 个 a 元素 ,就 可 以 用 a:hover img 来 设置 鼠标 
滑 过 img 时 的 动态 效果 了 。 

(2) 控制 子 元 素 的 显示 和 隐藏 。 

有 时 如 果子 元 素 通 过 display: none 隐藏 起 来 了 ,就 没有 办 法 利用 子 元 素 自 身 的 
hover 伪 类 来 控制 它 了 ,只 能 使 用 父 元 素 的 hover 伪 类 对 它 进行 控制 ,例如 下 拉 菜 单 。 

hover 伪 类 不 能 做 什么 : hover 伪 类 只 能 控制 元 素 自身 或 其 子 元 素 在 鼠标 滑 过 时 的 
动态 效果 ,而 无 法 控制 其 他 元 素 实现 动态 效果 ,例如 tab 面板 由 于 要 用 tab 项 (a 元素) 控 
制 不 属于 其 包含 的 div 元 素 ,就 无 法 使 用 hover 伪 类 实现 ,而 只 能 通过 编写 JavaScript 代 


码 来 操纵 a 元 素 的 行为 实现 。 
4.7.6 与 定位 属性 有 关 的 CSS 属性 


CSS 中 ,有 几 个 属性 只 有 在 元 素 设 置 了 定位 属性 (position) 之 后 才 有 效 , 例 如 ， 
z-index 属性 、 偏 移 属性 (top、left 等 ) 和 裁 切 属性 等 。 

在 Dreamweaver 中 ,对 这 些 与 position 相关 的 属性 设置 在 “定位 ”选项 面板 中 ,其 中 ， 
“ 宽 " 和 “高 ”对 应 width 和 height 属性 ,实际 上 这 两 项 的 设置 在 * 方 框 ?面板 中 也 有 。“ 裁 
切 ” 可 用 来 对 图 像 或 其 他 盒子 进行 剪 切 ,但 仅 对 绝对 定位 元 素 有 效 。“ 显 示 ” 对 应 visibility 
属性 , 若 设置 为 隐藏 , 则 元 素 不 可 见 ,但 元 素 所 占 的 位 置 仍然 会 保留 。 


1. z-index 属性 


z-index 属性 用 于 调整 定位 时 重 县 块 之 间 的 上 下 位 置 。 与 它 的 名 称 一 样 ,想象 页 面 为 
x-y 轴 , 那 么 垂直 于 页 面 的 方向 就 为 z 轴 ,z-index 值 大 的 盒子 会 倒 放 在 值 小 的 盒子 的 上 
方 ,可 以 通过 设置 z-index 值 改变 盒子 之 间 的 重合 次 序 。z-index 默认 值 为 0, 当 两 个 盒子 
的 z-index 值 一 样 时 , 则 保持 原来 的 高 低 覆 盖 关 系 。 

2. 制作 动态 改变 又 放 次 序 的 导航 条 

利用 z-index 属性 改变 盒子 又 放 次 序 的 功能 ,我 们 可 以 制作 出 如 图 4-96 所 示 的 导航 
条 来 。 该 导航 条 由 若干 个 导航 项 和 下 部 的 水 平 条 组 成 。 水 平 条 是 一 个 绝对 定位 元 素 , 通 
过 设置 它 的 位 置 使 它 正 好 倒 放 在 导航 项 下 面 的 部 分 上 。 在 正常 浏览 状态 下 ,导航 项 的 下 
方 被 水 平 条 覆盖 , 当 鼠 标 滑 过 某 个 导航 项 时 ,设置 它 的 z-index 值 变 大 ,这 样 该 导航 项 就 会 
遮盖 住 水 平 条 ,形成 如 图 4-96 所 示 的 动态 效果 。 


图 4-96 动态 改变 z-index 属性 的 导航 条 





下 面 分 步 来 讲解 如 何 制作 动态 改变 z-index 属性 的 导航 条 。 
(1) 首先 ,因为 z-index 只 对 设置 了 定位 属性 的 元 素 才 有 效 , 所 以 导航 项 和 水 平 条 都 
要 设置 定位 属性 。 由 于 每 个 导航 项 的 位 置 应 该 保持 在 标准 流 中 的 位 置 不 变 , 所 以 设置 它 
们 为 相对 定位 ,不 设置 偏 移 属性 。 而 水 平 条 要 释放 在 导航 项 的 上 方 , 不 占据 网 页 空间 , 因 
此 设置 它 为 绝对 定位 。 而 且 水 平 条 要 以 整个 导航 条 为 基准 进行 定位 ,所 以 将 整个 导航 条 
放 在 一 个 div 盒子 内 ,并 设置 它 为 相对 定位 ,作为 水 平 条 的 定位 基准 。 结 构 代 码 如 下 : 
<div id- "nav> < 上 -主要 作用 是 作为 底部 水 平 条 的 定位 基准 --> 
<ahreE 只 "><spar> 首 页 </spar>< /a> < 二 -该 导航 条 使 用 了 滑动 门 技术 --> 
<ahre 伍 嘲 "><spar> 中 心 简介 < /span></a> … 
<ahre 人 只 <spam> 技 术 支 持 < /span>< /a> 
<div id "bott></div < 上 -底部 的 水 平 条 --> 
</div> 


(2) 接 下 来 写 导 航 条 #nav 和 它 包含 的 水 平 条 的 CSS 代码 。# nav 只 要 设置 为 相对 
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定位 就 可 以 了 ,作为 水 平 条 并 bott 的 定位 基准 ,而 # bott 设置 为 绝对 定位 后 必须 向 下 偏 
移 28px, 这 样 正好 倒 放 于 导航 项 的 下 部 。 





#nav { position:relative; /* 作为 定位 基准 * / } 
#bott{ 
background- color: #999966; 
height :Grx; /* 水 平 条 高 度 为 azx / 
font- size:0; /* 兼容 下 ,也 可 用 overflow:hidden 蔡 代 * / 
clear:bothy /* 由 于 a 元 素 都 浮动 ,所 以 要 清除 浮动 * / 
position:absolute; 
width:95%; /* 绝对 定位 元 素 宽度 不 会 自动 伸展 ,设置 宽度 使 其 占 满 一 行 * / 
top:28px; } 


(3) 用 滑动 门 技术 设置 a 元素 和 span 元 素 的 背景 ,背景 图 片 如 图 4-97 所 示 。 其 中 
span 元 素 的 背景 从 右 往 左 铺 ,a 元素 的 背景 从 左 往 右 铺 ,全 加 后 形成 自 适应 宽度 的 圆 角 导 
航 项 背景 。 再 设置 a 元素 为 相对 定位 ,这 是 为 了 使 a 元 素 在 鼠标 滑 过 时 能 设置 z-index 属 
性 。 代 码 如 下 : 


#nava { 
position:relative; /* 设置 为 相对 定位 ,为 了 应 用 z-index 属性 x*/ 
float: left; /* 使 a 元 素 水 平 排列 x* / 
Padding- left: 14px; 
background: url (images/zindex.gif) 0 - 42px; /* 取 下 半 部 分 的 图 案 作 背 景 * / 
height:34px7 
1line- height:28px7 /x* 行 高 比 高 度 小 ,使 文字 位 于 中 部 偏 上 * / 
color:White; 
text- decoration:none; } 
#nav span { 
Pacding- right:14px; 
background: url (images/zindex.gif) 1008- 42px; 
font- size:14px7 
float:left; /* 此 处 是 为 兼容 正 6 防止 span 占 满 整 行 */ } 


4-97 导航 条 的 背景 图 片 (zindex. gif) 
(4) 最 后 设置 鼠标 滑 过 时 的 效果 ,包括 设置 z-index 值 改变 重 琶 次 序 ,改变 背景 显示 
位 置 实现 图 像 的 翻转 等 。 代 码 如 下 : 


#nav a:hover { 
cursor:hand; /# 使 正 6 中 光标 变 为 手 形 x* / 
background- position:0 0; /* 取 上 半 部 分 图 像 作为 背景 * / 
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2- index:10007 /* 使 鼠标 悬 停 的 导航 项 遮盖 住 水 平 条 * /} 
#nav a:hover span { 
height :34rx; 
background- position:100%0; /* 取 下 半 部 分 图 像 作为 背景 ,实现 背景 的 翻转 * / 
Color:#ff0000; } 


这 样 动态 改变 层 释 次序 的 导航 条 就 做 好 了 ,如果 将 导航 条 的 背景 图 片 制 作成 具有 半 
透明 效果 的 png 格式 文件 ,效果 可 能 会 更 好 。 


3. overflow 属性 


(1) overflow 属性 的 基本 功能 是 设置 元 素 盒子 中 的 内 容 如 果 溢 出 是 否 显示 , 取 值 有 
visible( 可 见 ) .hidden( 隐 藏 ) .scroll( 出 现 滚动 条 ) auto( 自 动 )。 如 果 不 设 置 则 默认 值 为 
visible。 将 下 面 代码 中 的 overflow 值 依 次 修改 为 visible hidden .scroll auto 的 显示 效果 
如 图 4-98 所 示 。 


< style type= "text/css"> 
#cH { 
border:1lpx solid #333333; 
height: 100px; 
width: 100px; 
verflow: visible; /* 依次 修改 为 hiaden、 scroll autox /} 
</style> 
<div id "aq> 在 一 个 遥远 而 古老 的 国度 里 ,国王 和 王后 因为 性 格 不 合 而 离婚 ,国王 再 了 了 一 位 美丽 
的 王后 。 可 惜 ,这 位 新 后 天 性 善 妨 < /div> 



















































































图 4-98 从 左 至 右 overflow 属性 分 别 设置 为 visible(Firefox) .visible(IE 6) .hidden ,scroll auto 的 效果 


由 于 IE 对 于 空 元 素 的 默认 高 度 是 12px, 所 以 经 常 使 用 (overflow:hidden) 使 空 元 素 
在 下 浏览 器 中 所 占 高 度 为 0。 

(2) overflow 属性 的 另 一 种 功能 是 用 来 代替 清除 浮动 的 元 素 。 

如 果 父 元 素 中 的 子 元 素 都 设置 成 了 浮动 ,那么 子 元 素 脱 离 了 标准 流 ,导致 父 元 素 高 度 
不 会 自动 伸展 包含 住 子 元 素 ,在 前 面 介 绍 过 可 以 在 这 些 浮 动 的 子 元 素 的 后 面 添 加 一 个 清 
除 浮 动 的 元 素 , 来 把 外 围 盒子 撑 开 。 实 际 上 ,通过 对 父 元 素 设置 overflow 属性 也 可 以 扩 
展 外 围 盒子 高 度 , 从 而 代替 了 清除 浮动 元 素 的 作用 。 例如: 
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< style type= "text/css"> 





div{ 
Paqdding:10pxy margin:10px; 
border:1px dashed #111111; 
background- color:#90baff; } 
-father{ 
background- color:#ffff99; 
border:lpx solid #111111; 
werflow:auto; /* 图 4- 98( 左 ) 是 未 添加 这 句 时 的 效果 * /} 
-sonl{ 
float:left; } 
</style> 
<div class= "father"> 
<div class= "sonl"> Box- 1< /div> 
</div> 


可 看 到 ,对 父 元 素 设 置 overflow 属性 为 auto 或 hidden 时 ,就 能 达到 在 Firefox 中 扩 


展 外 围 盒子 高 度 的 效果 ,如 图 4-99( 右 ) 所 示 , 这 比 专门 在 浮动 元 素 后 添加 一 个 清除 浮动 
的 空 元 素 要 简单 得 多 。 























图 4-99 利用 overflow 属性 扩展 外 围 盒子 高 度 之 前 ( 左 ) 和 之 后 ( 右 ) 的 效果 


对 于 正 来 说 ,只 要 设置 浮动 元 素 的 父 元 素 的 宽 或 高 ,那么 浮动 元 素 就 不 会 脱离 标准 
流 。 父 元 素 会 自动 伸展 包含 住 浮动 块 ,因此 不 存在 扩展 外 围 盒 子 高 度 的 问题 。 

但 当 没 有 对 父 元 素 box 设置 宽 或 高 时 ,在 IE 中 父 元 素 也 不 会 包含 住 浮动 块 , 而 且 对 
IE 即使 按 上 述 方法 设置 父 元 素 的 overflow 属性 也 不 起 作用 。 这 时 对 IE 来 说 ,只 能 对 售 
子 设置 宽 或 高 ,如 果 不 方 便 设 置 宽度 , 则 可 以 针对 box 设置 一 个 很 小 的 百分比 高 度 , 如 
(Cheight:1%), 使 IE 6 中 的 box 也 能 包含 住 浮动 块 , 这 样 就 兼容 了 IE 6 和 Firefox 浏 
览 器 。 

另外 ,对 浮动 元 素 后 面 的 元 素 设 置 overflow:hidden 也 能 使 Firefox 出 现 和 IE 中 相 
同 的 效果 ,读者 可 以 对 图 4-99 中 对 应 的 代码 做 修改 来 验证 这 一 点 。 


4.8 CSS 十 div 布局 


使 用 CSS 布局 时 , 先 不 要 考虑 网 页 的 外 观 , 而 应 该 先 思考 网 页 内 容 的 语义 和 结构 。 
因为 一 个 结构 良好 的 HTML 页 面 可 以 通过 任何 外 观 表 现 出 来 。 
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虽然 普通 用 户 看 到 的 网 页 上 有 文字 、 图 像 等 各 种 内 容 。 但 对 于 浏览 器 来 说 , 它 “ 看 到 ” 
的 页 面 内 容 就 是 大 大 小 小 的 盒子 。 对 于 CSS 布局 而 言 ,本质 就 是 大 大 小 小 的 盒子 在 页 面 
上 的 摆 放 。 我 们 看 到 的 页 面 中 的 内 容 不 是 文字 ,也 不 是 图 像 ,而 是 一 堆 盒子 。 要 考虑 的 就 
是 盒子 与 盒子 之 间 的 关系 ,是 上 下 排列 ,左右 排列 还 是 赃 套 排列 ,是 通过 标准 流 定位 还 是 
通过 浮动 .绝对 定位 、 相 对 定位 实现 ,定位 基准 是 什么 等 。 将 盒子 之 间 通 过 各 种 定位 方式 
排列 使 之 达到 想 要 的 效果 就 是 CSS 布局 的 基本 思想 。 

CSS 网 页 布局 的 基本 步骤 如 下 : 

(1) 将 页 面 用 div 分 块 ; 

(2) 通过 CSS 设计 各 块 的 位 置 和 大 小 ,以 及 相互 关系 ; 
(3) 在 网 页 的 各 大 div 块 中 插入 作为 各 个 栏目 框 的 小 块 。 
表 4-7 对 表格 布局 和 CSS 十 DIV 布局 的 特点 进行 了 比较 。 


表 4-7 表格 布局 和 CSS 十 DIV 布局 的 比较 











表格 布局 CSS 十 DIV 布局 
布局 方式 将 页 面 用 表格 和 单元 格 分 区 将 页 面 用 div 等 元 素 分 块 
控制 元 素 占 据 的 页 | 通过 二 td 二 标记 的 width 和 height 属 | 、、 i 
面 尖 本 性 确定 通过 CSS 属性 width 和 height 确定 





控制 元 素 在 页 面 中 
的 位 置 


在 单元 格 前 插入 指定 宽度 的 单元 格 
使 元 素 位 置 向 右 移动 ,或 插入 行 或 占 
位 表格 使 元 素 向 下 移动 


设置 元 素 的 margin 属性 或 设置 其 父 
元 素 的 padding 属性 使 元 素 移 动 到 指 
定位 置 








只 能 通过 图 片 所 在 单元 格 的 位 置 控 
图 三 的 信 轩 制图 片 的 位 置 
4.8.1 分 栏 布局 的 种 类 





既 可 以 通过 图 片 所 在 元 素 的 位 置 确 
定 , 又 可 以 使 用 背景 的 定位 属性 确定 
图 片 的 位 置 


网 页 的 布局 从 总 体 上 说 可 分 为 固定 宽度 布局 和 可 变 宽 度 布局 两 类 。 所 谓 固定 宽度 ， 
是 指 网 页 的 宽度 是 固定 的 ,如 980px; 不 会 随 浏 览 器 大 小 的 改变 而 改变 ;而 可 变 宽 度 是 指 
如 果 浏 览 器 窗口 大 小 发 生变 化 ,网 页 的 宽度 也 会 变化 ,例如 将 网 页 宽度 设置 为 85% ,表示 
它 的 宽度 永远 是 浏览 器 宽度 的 85%。 

固定 宽度 的 好 处 是 网 页 不 会 随 浏 览 器 大 小 的 改变 而 发 生变 形 , 窗 口 变 小 只 是 网 页 的 
一 部 分 被 遮盖 住 ,所 以 固定 宽度 布局 用 得 更 广泛 ,适合 初学 者 使 用 。 而 可 变 宽 度 布局 的 好 
处 是 能 适应 各 种 显示 器 屏幕 ,不 会 因为 用 户 的 显示 器 过 宽 而 使 两 边 出 现 很 宽 的 空白 区 域 。 

以 1-3-1 式 三 列 布局 为 例 , 它 具有 的 布局 形式 如 图 4-100 所 示 。 


@_W.. 准 网 页 设计 与 PHP 
































| 
[等 比例 | [单列 固定 | [单列 变 宽 | 





























中 列 固定 侧 列 固定 中 列 变 宽 侧 列 变 宽 


图 4-100 1-3-1 式 布局 所 有 的 种 类 








4.8.2 固定 宽度 布局 
1. 固定 宽度 分 栏 布局 的 实现 


固定 宽度 布局 的 最 常用 方法 是 将 所 有 栏 都 浮动 ,在 4. 6.4 节 关 于 已 经 介绍 了 三 栏 浮 
动 实现 1-3-1 布局 的 方法 ,此 处 不 再 袭 述 。 


2. 固定 宽度 网 页 居中 的 方法 


通常 情况 下 我 们 都 希望 制作 的 网 页 在 浏览 器 中 居中 显示 ,通过 CSS 实现 网 页 居中 主 
要 有 以 下 三 种 方法 : 

1) text-align 法 

这 种 方法 设置 body 元 素 的 text-align 值 为 center, 这 样 body 中 的 内 容 ( 整 个 网 页 ) 就 
会 居中 显示 。 由 于 text-align 属性 具有 继承 性 ,网 页 中 各 个 元 素 的 内 容 也 会 居中 显示 ,这 
是 我 们 不 希望 看 到 的 ,因此 设置 包含 整个 网 页 的 容器 # container 的 text-align 值 为 left。 
代码 如 下 : 

body{text— align: center;min- width: 990pxz} 

#container {margin: 0 auto;text— align: left;width: 990px;} 

2) margin 法 

通过 设置 包含 整个 网 页 的 容器 # container 的 margin 值 为 "0 ”auto”, 即 上 下 边界 为 
0, 左 右边 界 自 动 ,再 配合 设置 width 属性 为 一 个 固定 值 或 相对 值 ,也 可 以 使 网 页 居中 ,从 
代码 量 上 看 ,这 是 使 网 页 居中 一 种 最 简洁 的 办 法 。 例 如 : 

#container { margin: 0 auto; width: 980px; } 

#container { margin: 0 auto; width: 85%; } 

注意 : 如 果 仅 设 置 井 container { margin: 0 ”auto; } ,而 不 设置 width 值 ,网 页 是 不 
会 居中 的 ,而 且 使 用 该 方法 网 页 顶部 一 定 要 有 文档 类 型 声明 DOCTYPE, 和 否则 在 IE 6 中 
不 会 居中 。 

3) 相对 定位 法 

相对 定位 法 居中 在 4.7. 3 相对 定位 的 应 用 一 节 中 已 经 介绍 过 , 它 只 能 使 固定 宽度 的 
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网 页 居中 。 代 码 如 下 : 


#container { position: relative; width:980px; left: 50%; margin- left: ~ 490px; } 


4.8.3 CSS 布局 的 案例 一 一 重 构 太阳 能 网 站 

本 节 使 用 CSS 布局 的 方法 重新 制作 2. 6.7 节 中 用 表格 布局 制作 的 太阳 能 网 站 ,这 称 
为 网 站 重 构 。CSS 布局 本 质 上 就 是 设计 盒子 在 页 面 上 如 何 排列 ,图 4-101 是 该 网 站 CSS 
布局 示意 图 ,最 终 效果 和 图 2-45 中 表格 布局 的 网 页 效果 完全 相同 。 制 作 步 骤 如 下 。 





#copyright 


图 4-101 太阳 能 网 站 CSS 布局 示意 图 





1. 制作 网 页 的 头 部 


(1) 将 网 页 划分 为 两 部 分 , 即 上 方 的 header 部 分 和 主体 的 container 部 分 ,如 图 4-101 
所 示 ,观察 header 部 分 有 两 个 背景 色 ( 绿 色 和 白色 ) 和 一 个 背景 图 像 ,而 一 个 元 素 的 盒子 
最 多 只 能 设置 一 种 背景 色 和 一 个 背景 图 像 , 因 此 需要 插入 两 个 盒子 来 实现 。 代 码 如 下 : 


<div id= "heager"><hl> 光 普 太阳 能 网 站 < /hl>< /div> 
(2) 设置 # header 的 背景 色 为 绿色 , 宽 为 网 页 的 宽度 852px。 


#header{ 
background- color:#99cc007 
width:852px7 } 
(3) 设置 hl 的 背景 色 为 白色 ,并 设置 背景 图 像 为 logo. jpg, 通 过 设置 margin 使 盒子 
向 右 偏 移 161px, 然 后 用 text-indent 方法 隐藏 标记 中 的 文字 。 这 样 网 页 的 头 部 就 做 好 了 。 





#header hl { 
text- indent: — 9999px; /* 隐藏 nl 中 的 文本 * / 
width: 69lpxy height: 104px; 
background: #fff url (images/10g0.jpg) no- repeat 64px 0; 
/* logo 图 像 左 侧 有 G4px 空 白 */ 
margin: 0 0 0 16lpx; /* 向 右 移 动 16Ilpzx /  } 
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提示 : 将 标题 中 的 文字 进行 图 像 蔡 换 最 主要 的 目的 就 是 在 HTML 代码 中 仍然 保留 
hl 元 素 中 的 文字 信息 ,这 样 对 于 网 页 的 维护 和 结构 完整 都 有 很 大 好 处 ,同时 对 搜索 引擎 
的 优化 也 有 很 大 的 意义 ,因为 搜索 引擎 对 hl 标题 中 的 信息 相当 重视 。 





2. 网 页 主体 部 分 的 分 栏 

(1) 页 面 主体 部 分 可 分 为 # nav 和 直 content 两 栏 ,可 将 这 两 栏 均 设置 为 浮动 ,以 便 让 
它们 并 列 排列 ,但 问题 是 两 栏 可 能 不 等 高 ,需要 用 其 他 办 法 让 它们 看 起 来 等 高 。 解 决 办 法 
是 在 两 栏 外 添加 一 个 容器 # container, 结 构 代码 如 下 : 





<div id= "container"> 
<div id "nav> < /div> 
<div id= "oontent> "< /div> 
</div> 


(2) 设置 整个 容器 # container 的 背景 色 为 绿色 ,设置 右边 栏 #content 的 背景 色 为 白 
色 , 这 样 # content 的 白色 覆盖 在 # container 的 右边 ,# container 的 左 侧 栏 就 是 绿色 了 ， 
看 起 来 左右 两 列 就 等 高 了 。 另 外 设置 #content 右边 框 为 1px 实 线 ,作为 网 页 的 右边 框 。 


#container { 
background- color:#9c0; 
width:852px; } 
#container #content { 
width:690px; 
background- color: White; 
float:left; 
border- right: #daeda3 lpx solid; /* 网 页 主体 部 分 的 右边 框 * /} 


3. 制作 左 侧 列 导航 块 


(1) 设置 左 侧 列 中 的 导航 块 样式 。 由 于 在 表格 布局 中 导航 块 宽度 是 161px, 而 里 面 
导航 项 的 宽度 是 143px, 所 以 可 以 设置 #nav 块 的 width 为 152px, 左 填充 为 9px, 这 样 
# nav 的 宽度 就 有 161px;, 而 它 里 面 的 导航 项 左右 也 正好 有 9px 的 宽度 ,实现 水 平 居 中 。 





#container #nav { 
float:left; 
width:152pxy height:166px; 
background— color:#00801b; 
Pacding:15px 0 0 x; } 


(2) 在 #nav 块 中 添加 6 个 a 元 素 作为 导航 项 ,HTML 代码 如 下 : 
<div id- "nav"> 
<ahre 伍 嘲 吃 首 页 < /a><a hre 仁 嘲 吃 关于 我 们 < /a><a hre 伍 哮 吃 产品 与 服务 < /a> 


<ahre 人 只 必 新 闻 中 心 </a><ahre 人 只 “ 职 业 发 展 < /a><a hre 伍 叶 吃 联系 我 们 
</a> 
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</div> 


(3) 然后 设置 这 些 导航 项 的 样式 ,其 中 导航 项 的 背景 图 如 图 4-102 所 示 ,设置 导航 项 
在 默认 状态 下 显示 该 背景 图 的 上 部 ,鼠标 滑 过 时 显示 下 部 即 实现 了 背景 翻转 效果 。 


#nava { 
isplay:block; 
width:113px; height:18px; 
background:url (images/dh.jpg) no- repeat; 


Pacding:Spx 0 0 30px; 

color:white; text- decoration:noney 

font:12pxV1.1 咽 体 "; } 加 
#nav a:hover { 

color:#00801b; © 


background- position:0 - 23px; } 
提示 : 如 果 要 将 图 像 作为 元 素 的 背景 显示 在 网 页 
中 ,只 需 设置 元 素 的 宽 和 高 等 于 图 像 的 宽 和 高 即 可 ,但 如 果 对 元 素 还 设置 了 填充 值 ,就 必 
须 将 元 素 的 宽 和 高 减 去 填充 值 。 例 如 ,a 元 素 的 背景 图 尺寸 是 143X23px, 但 由 于 设置 了 
填充 值 ,因此 对 a 元素 的 宽 和 高 设置 为 113px 和 18px。 
(4) 但 是 当 # container 里 的 两 列 都 浮动 后 .它们 都 脱离 了 标准 流 , 此 时 # container 
不 会 容纳 它们 (IE 除外 ) ,必须 在 它 里 面 放置 一 个 清除 浮动 的 元 素 用 来 扩展 # container 的 
高 度 。 
<div id "container"> 
<div id "nav> < /div> 
<div id "oontent"> < /div> 
<div jd "clear™”> < /div> 
</div> 
#container #clear { clear:both; } 


图 4-102 a 元 素 导 航 项 的 背景 图 


当然 ,也 可 以 设置 #container 元 素 (overflow:auto) 来 清除 浮动 的 影响 。 
4. 制作 右 侧 主要 内 容 栏 


(1) 接 下 来 设置 页 面 主 体 的 内 容 部 分 # content, 可 发 现 #content 盒子 里 包含 三 个 子 
盒子 ,分 别 用 来 放置 上 方 的 banner 图 片 .中间 的 公司 简介 栏目 和 底部 的 版 权 信息 ,因此 在 
元 素 # content 中 插入 三 个 子 div 元 素 。 代 码 如 下 : 

< div id "content"> 

< div id "pamer"> < /div> 


<divid-"intro> … </div> 
<div id "copyrightr> … </div> 
</div> 


(2) 设置 #banner 盒子 的 宽 和 高 正好 等 于 banner 图 片 (bal. jpg) 的 宽 和 高 ,再 设置 
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## banner 的 背景 图 是 banner 图 片 ,就 完成 了 banner 区 域 的 样式 设置 。 代 码 如 下 : 





#content #banner { 
background: url (images/bal .jpg) no- repeat; 
width:688px; height:181px; /* 宽 和 高 正好 等 于 bal.jpg 的 大 小 * /} 
(3) 设置 公司 简介 栏目 #intro, 可 发 现 公 司 简介 栏目 由 标题 和 内 容 两 部 分 组 成 ,因此 
在 其 中 插入 两 个 div。 由 于 标题 # title 部 分 有 两 个 背景 图 像 ,需要 两 个 盒子 ,所 以 在 
#title 里 面 再 添加 一 个 h2 元 素 。 代 码 如 下 : 
<div id "intro"> 
<div id "titler><h2> 公 司 简 介 < /h2>< /div> 
<div id "intr> 光 普 太 阳 能 成 立 于 …< img src= "images/in.jpg"/>*…< /div> 
</div> 
(4) 接 下 来 设置 # title 的 样式 ,由 于 #title 上 方 和 左边 需要 留 一 些 空隙 ,因此 设置 其 
margin 属性 和 width 属性 使 其 水 平 居中 ,设置 其 背景 图 像 为 一 张 小 背 景 图 像 横向 平 铺 。 


#intro #title { 


width:90%; 
margin:16px 0 0 5%; /* 设置 上 边界 和 左边 界 ,实现 水 平 居 中 * / 
background:url (images/bj .jpg) repeat— x; /* 背景 图 横向 平 铺 * /} 


(5) 再 对 h2 设置 背景 图 像 ,因为 需要 对 h2 元 素 进 行 图 像 替代 文本 ,设置 h2 的 高 度 
把 #title 盒子 撑 开 ,再 设置 margin 为 0 消除 h2 的 默认 边界 距 。 


#intro #title h2 { 


text- indent:- 9999px; /* 隐藏 2 的 文本 x*/ 
background:ur] (images/ggd.jpg) no- repeat; 

height :41px; 

margin:0; } 


(6) 设置 公司 简介 栏目 文本 的 样式 ,主要 是 设置 边界 ,字体 大 小 , 行 高 .字体 颜色 等 。 
#coontent #intro #intr { 

width:90%; 

margin:21px 0 0 5%; /x* 设置 上 边界 和 左边 界 ,实现 水 平 居 中 x* / 

font- size: Pt; line- height: 18pt; color: #999; } 


再 设置 文本 区 域 中 的 客服 人 员 图 片 右 浮动 ,实现 图 文 混 排 。 


#intro #intr img { /* 文本 里 的 客服 人 员 图 像 * / 
float:right; /* 右 浮动 ,实现 图 文 混 排 x / 
width:300px; height:200px; /* 宽 和 高 正好 等 于 in.jpg 的 大 小 * /} 


(7) 设置 网 页 底部 版 权 部 分 样式 ,包括 用 上 边框 制作 一 条 水 平 线 和 设置 文本 样式 。 


#content #copyright { 
font— size: Pt; color: #999; text— align:center7 
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width:90%; 
gin 0 0 ED 
border- top:1lpx solid #occ; } 
总 结 : 通过 上 面 的 代码 可 看 出 ,由 于 要 定义 每 个 盒子 在 网 页 中 的 精确 大 小 ,几乎 每 个 
元 素 的 盒子 都 设置 了 width 和 height 属性 ,只 是 有 些 父 元 素 可 以 被 子 元 素 撑 开 ,所 以 父 
元 素 的 这 些 属性 有 时 可 以 省 略 。 
为 了 让 元 素 的 盒子 在 网 页 中 精确 定位 ,一 般 可 通过 元 素 自身 的 margin 和 父 元 素 的 
padding 属性 使 盒子 精确 移动 到 某 个 位 置 , 像 # header 中 的 hl 元 素 就 是 通过 margin 属 
性 移动 到 了 右 侧 。 


4.8.4 可 变 宽度 布局 


随 着 显示 屏 的 变 大 ,可 变 宽 度 布局 目前 正 变 得 流行 起 来 , 它 比 固定 宽度 布局 有 更 高 的 
技术 含量 。 本 节 介 绍 三 种 最 常用 的 可 变 宽 度 布局 模式 , 即 : 两 列 (或 多 列 ) 等 比例 布局 ,一 
列 固定 一列 变 宽 的 1-2-1 式 布局 ,两 侧 列 固定 、 中 间 列 变 宽 的 1-3-1 式 布局 。 





1. 两 列 ( 或 多 列 ) 等 比例 布局 


两 列 ( 或 多 列 ) 等 比例 布局 的 实现 方法 很 简单 ,将 固定 宽度 布局 中 每 列 的 宽 由 固定 的 
值 改 为 百分比 就 行 了 。 


#heagder, #pagefooter,#container{ 
margin:0 auto; 
width:85%; /x* 改 为 比例 宽度 x*/ } 
#content{ 
float:right; 
width:66%; /x 改 为 比例 宽度 x*/ } 
#sige{ 
float:left; 
width:33%; /* 改 为 比例 宽度 * / } 
这 样 不 论 浏览 器 窗口 的 宽度 怎样 变化 ,两 列 的 宽度 总 是 等 比例 的 。 如 图 4-103@ 
所 示 。 
但 是 当 浏览 器 变 得 很 窄 之 后 ,如 图 4-103@@ 所 示 ,网 页 会 变 得 很 难看 。 如 果 不 希 望 这 
样 ,可 以 对 # container 添加 一 条 CSS 2. 1 里 面 的 “min-width: 490px;” 属 性 , 即 网 页 的 最 
小 宽度 是 490px, 这样 对 于 支持 该 属性 的 IE 7 或 Firefox 来 说 , 当 浏 览 器 的 宽度 小 于 
490px 后 ,网 页 就 不 会 再 变 小 了 ,而 是 在 浏览 器 的 下 方 出 现 水 平 滚动 条 。 


2. 单列 变 宽 布局 一 一 改进 浮动 法 


一 列 固定 一列 变 宽 的 1-2-1 式 布局 是 一 种 在 博客 类 网 站 中 很 受 欢迎 的 布局 形式 ,这 
类 网 站 常 把 侧 边 的 导航 栏 宽度 固定 ,而 主体 的 内 容 栏 宽度 是 可 变 的 ,如 图 4-104 所 示 。 
例如 ,网 页 的 宽度 是 浏览 器 宽度 的 85% ,其 中 一 列 的 宽度 是 固定 值 200px。 如 果 用 表 
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1-2-1 布局 等 比例 变 度 - Worills Firefor 








Page Content 2 


火车 来 了 (而且 理所当然 的 往 上 面 有 很 多 | 
和 信人 用 的 休 各 上 在 妆 2 耻 二 站 代 
人 | 












rr : 
的 站 有 和 攻 久生 他 性 2 | 


加 浏览 器 比较 宽 时 
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Page Content 2 
很 不 巧 ， 火 车 来 了 (而 且 理所当然 的 
上 面 有 很 多 小 孩 的 ， Ua 
上 行驶 ) 而 你 正 站 在 铁轨 的 切换 器 
旁 ， 因此 你 能 让 火车 转 福 停 用 的 铁轨 
Ss : 
友 ; 但 是 那 名 在 停 用 铁轨 上 的 小 朋友 ， 
你 会 怎么 办 ? :到 1 
加 浏览 器 变 罕 后 加 浏览 器 变 得 很 罕 之 后 


图 4-103 等 比例 变 宽 布局 时 在 浏览 器 窗口 变化 时 的 不 同 效果 














| Page Content 1 
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很 不 巧 ， 淡 车 来 了 (而 且 理 很 不 巧 ， 淡 车 来 了 (而 且 理 所 当 拢 的 往 上 面 有 


， 所 当 抗 的 往 上 加 有 很 多 小 孩 的 ， 很 多 小 孩 的 ， 仍 在 使 用 的 铁轨 上 行驶 ) 而 你 正 站 
， 仍 在 使 用 的 铁轨 上 行驶 ) 而 你 在 铁轨 的 切换 老 务 ， 因 此 人 能 让 火车 转 往 售 用 的 
正 站 在 铁轨 的 切 接 器 著 ， 因 此 你 把 轨 





四 淡 车 转 入 你 用 的 铁轨 司 


图 4-104 一 列 固定 ,一 列 变 宽 布局 (右边 这 一 列 宽度 是 固定 的 ) 


格 实现 这 种 布局 ,只 需 把 布局 表格 的 宽度 设 为 85%% ,把 其 中 一 列 的 宽度 设 为 固定 值 就 可 
以 了 。 但 用 CSS 实现 一 列 固定 、 一 列 变 宽 的 布局 ,就 要 麻烦 一 些 。 首 先 , 我 们 把 一 列 div 
的 宽度 设置 为 200px, 那 么 另 一 列 的 宽 就 是 : 包含 整个 网 页 container 宽 的 “100% 一 
200px”, 而 这 个 宽度 不 能 直接 写 , 因 此 必须 设置 另 一 列 的 宽 是 100%% ,这 样 另 一 列 就 和 
container 等 宽 , 这 时 会 占 满 整个 网 页 ,再 把 这 一 列 通 过 负 边 界 margin-left: 一 200px 向 
左 偏 移 200px, 使 它 的 右边 留 出 200px', 正 好 放置 side 列 。 最 后 设置 这 一 列 的 左 填 充 为 
200px, 这 样 它 的 内 容 就 不 会 显示 到 网 页 的 外 边 去 。 代 码 如 下 ,图 4-105 是 该 布局 方法 
的 示意 图 。 


#heagder,#pagefooter,#container{ 
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margin:0 auto; 

width:85%; } header 
#contentWrap{ 

margin left:- 200px; 

float:left; 

width:100%; } 
#content{ 

Padding- left:200px; } 
#sige{ 

float:right; 

width:200px; Y 
#pagefooter{ pagefooter 

Clear:both; } 
< div id "header">*…< /div> 图 4-105 单列 变 宽 布局 一 改进 浮动 法 示意 图 
<div id= "container"> 

<div id "contentWrap"> 

<div id= "content"> < /div> 

</div> 

<div id- "side"> "< /div> 
</div> 
< div id- "pagefooter">*"< /div> 




















container 





contentWrap 





content side 















































3. 1-3-1 中 间 列 变 宽 布局 一 一 绝对 定位 法 


两 侧 列 固定 、 中 间 列 变 宽 的 1-3-1 式 布局 也 是 一 种 常用 的 布局 形式 ,这 种 形式 的 布局 
通常 是 把 两 侧 列 设置 成 绝对 定位 元 素 ,并 对 它们 设置 固定 宽度 。 例 如 左右 两 列 都 设置 成 
200px 宽 ,而 中 间 列 不 设置 宽度 ,并 设置 它 的 左右 margin 都 为 200px, 使 它 不 被 两 侧 列 所 
诞 盖 。 这 样 它 就 会 随 着 网 页 宽度 的 改变 而 改变 ,因而 被 形象 地 称 为 液态 布局 。 其 结构 代 
码 和 1-3-1 固定 宽度 布局 一 样 ,代码 如 下 : 


<div id "header"> <h2> Page Header< /h2> < /div> 
<div idF "container"> 
<div id "navi"> <h2> Navi Bar< /h2>**< /div> 
<div id= "content"> <h2> Page Content< /h2> …< /div> 
<div id "side"> <h2> sige Bar< /h2> **< /div> 
</div> 
<div id- "footer"> <h2> Page Footer< /h2>< /div> 
然后 将 container 设置 为 相对 定位 , 则 两 侧 列 以 它 为 定位 基准 。 如 果 此 时 对 两 侧 列 的 
盒子 设置 背景 色 ,那么 两 侧 列 就 可 能 和 中 间 列 不 等 高 ,如 图 4-106 所 示 ,这样 很 不 美观 。 
因此 不 能 对 两 侧 列 设置 背景 色 ,而 应 该 对 container 设置 背景 色 ,再 对 中 间 列 设置 另 
一 种 背景 颜色 ,这 样 两 侧 列 的 背景 色 实 际 上 就 是 container 的 背景 颜色 了 ,而 中 间 列 的 背 
景色 覆盖 在 container 的 背景 色 上 面 ,这 样 两 侧 列 看 起 来 就 和 中 间 列 等 高 了 ,实现 代码 
如 下 。 








局 准 网 页 设计 与 PHP 








#navi,#side { 

width: 200px; 

position: absolute; /* 两 侧 列 绝对 定位 x* / 

top: 07 } 
#navi { 

left:0; /* 从 #container 的 左 侧 开 始 定 位 x*/ 1 
#sige { 

right:0; / 从 #container 的 右 侧 开始 定位 * / } 
#content { 

background:white; /* 设置 中 间 列 背景 色 为 白色 * / 

margin: 0 200px; /* 不 占据 两 侧 列 的 位 置 */ 1} 
#container { 

width:85%; 

margin:0 auto; /* 网 页 居中 * / 

background- color:orchid; /* 设置 容器 的 背景 色 为 淡 紫 色 * / 

position: relative; /* #container 作为 左右 两 列 的 定位 基准 * / } 


Navi Bar 


» Home 

» Web Design 
» Web Dev 

® Map 

» ContactUs 
» Home 

» Web Design 





图 4-106 基本 的 1-3-1 中 间 列 变 宽 布局 


上 面 的 方法 两 侧 列 的 背景 颜色 总 是 相同 的 。 如 果 和 希望 两 侧 列 的 背景 颜色 不 同 , 则 需 
要 在 container 里 面 再 套 一 层 innerContainer, 给 container 设置 一 个 背景 图 片 从 左边 开始 
垂直 平 铺 ,给 innerContainer 设置 一 个 背景 图 片 , 从 右边 开始 平 铺 。 两 个 背景 图 片 都 只 有 
两 列 宽 ,不 会 覆盖 对 方 。 它 的 结构 代码 如 下 ,效果 如 图 4-107 所 示 。 


<div id "container"> 
<div id "imerCntainer™> 
<div id "navi > "< /div> 
<div id "content">**< /div> 
<div id "side"> < /div> 
</div> 
</div> 





其 CSS 代码 就 是 在 上 述 基 础 上 修改 了 直 container 选择 器 并 新 建 了 #innerContainer 
选择 器 ,代码 如 下 : 


#container { 

width:85%; margin:0 auto; /x 水平 居 中 x*/ 

background:ur] (images/bg- right.gif) repeat- y right top; 

position: relative; /* #container 作 为 左右 两 列 的 定位 基准 * / } 
#:jnnerContainer { 

background:url (images/bg- left .gif) repeat- y left top; } 


Page Content 
生活 中 到 处 都 存在 著 毕 分 ， 综 来 练 散 好 爸 都 是 命 
; 有 些 缘分 也 许 从 一 开始 就 注定 要 失 ， 
去 ， 有 些 缘分 也 许 是 永远 都 不 会 有 结果 


创造 一 种 奇迹 。 也 许 不 是 不 曾 


可 是 我 却 偏偏 渴望 
心动 ， 不 是 没有 可 能 ， 只 是 有 绕 无 份 ， 情 评 缘 浅 ， 如 
果 息 此 出 现时 一点, 也许 就 会 有 美好 的 结局 ,又 或 者 相 
过 的 时 间 再 胸 一 点 胸 到 两 个 人 在 各 自 的 爱情 故事 中 经 
历 了 包容 与 体谅 ,善待 和 妥协 ， 翡 痛 与 快乐 ， 到 了 那 时 
也 许 走 到 一 起 就 会 有 可 能 。 





图 4-107 使 用 带 阴 影 的 两 个 背景 图 像 的 页 面 效 果 


可 以 看 到 ,使 用 这 种 方式 还 可 以 给 两 个 背景 色 图 片 设 置 一 些 图 像 效 果 ,例如 图 4-107 
中 的 内 侧 阴 影 效 果 。 


4.8.5 HTML 5 新 增 的 文档 结构 标记 


在 CSS 十 DIV 布局 中 ,通常 给 网 页 的 每 个 区 域 的 DIV 都 设置 一 个 ID 属性 ,属性 值 一 
般 是 header ,footer、nav、sidebar 等 。 例 如 ,下 面 是 一 个 1-2-1 布局 网 页 的 结构 代码 : 


<body> 

<div icdF "header"> 页 头 < /div> 

<div id av 导航 < /div> 

<div id "container"> 
<div id "siderbar"> 左 侧 栏 < /div> 
<div id "main> 主 栏 </div> 

</div> 

<div id "footer"> 底 部 说 明 < /div> 

< /pody> 


尽管 上 述 代码 不 存在 任何 错误 ,还 可 以 在 HTML 5 环境 中 很 好 地 运行 ,但 该 页 面 结 


构 对 于 浏览 器 来 说 都 是 未 知 的 ,因为 元 素 的 ID 值 允许 开发 者 自己 定义 ,只 要 开发 者 不 同 ， 
那么 元 素 的 ID 值 就 可 能 各 异 。 


@__W.,. 页 设计 与 PHP 


为 了 让 浏览 器 更 好 地 理解 页 面 结构 ,HTML 5 中 新 增 了 一 些 页 面 结构 标记 。 这 些 新 
标记 可 明确 地 标明 页 面 元 素 的 含义 ,如 头 部 二 header 二 .导航 二 nav 二 、 脚 部 二 footer 二 、 分 
区 所 section> ,文章 二 article 盖 等 。 将 上 述 代码 修改 成 HTML 5 支持 的 页 面 代码 ,如 下 
所 示 。 





<body> 
<header> 页 头 < /header> 
<naw> 导航 < /nav> 
< section> 
<aside> 左 侧 栏 < /aside> 
<article> 主 栏 < /article> 
< /section> 
< footer> 底 部 说 明 < /footer> 
< /body> 


这 样 就 可 直接 对 上 述 结构 标记 设置 CSS 样式 ,代码 如 下 ,在 支持 HTML 5 的 浏览 器 
中 显示 效果 如 图 4-108 所 示 。 


< style type= "text/css"> 
header, nav, section,article,asige, footer{ 
border:solid lpx #666; 
Padding: 10px; 
margin: rx auto; } 
section{padding:4rx 0;} 
header, nav, footer{ width:400px } 
section{width:420px;margin:€px auto;} 
asigde { 
float:left; 
width:60px; 
height:100px; 
margin:drx dpx dpx 0; } 
article{ 
float:left; 
width:312px; 
height:100px; } 
footer { 
Clear:both; } 
</style> 
可 见 ,在 HTML 5 中 ,使 用 CSS 布局 已 经 不 再 需要 div 了 。 也 不 再 需要 自己 设置 布 
局 元 素 的 ID 属性 ,从 标准 的 元 素 名 就 可 以 推断 出 各 个 部 分 的 含义 。 这 对 于 音频 浏览 器 、 
手机 浏览 器 和 其 他 非 标准 浏览 器 尤其 重要 。 
其 中 ,<article> 元 素 常 用 来 创建 一 个 栏目 框 ,在 该 元 素 中 还 可 以 有 自己 的 独立 元 
素 , 如 二 header> 或 二 footer 等 过 ,示例 如 下 。 这 样 不 仅 使 内 容 区 域 各 自分 段 、 便 于 维护 ， 
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四 localhost/php/htnlSbu b x 


€ 3 © | D1localhost/php/html5bu. html 











页 头 
导航 





























底部 说 明 














图 4-108 HTML 5 标记 布局 的 网 页 


而 且 代 码 简单 ,局 部 修改 也 更 方便 。 
<article> 
< heager> 
<h3> HIML 5< /h3> 
< /header> 
<P> HIML 5 是 下 一 代 BML 的 标准 ,目前 仍然 处 于 发 展 阶段 。 经 过 了 Web 2.0 时 代 , 基 于 互联 网 的 应 用 
已 经 越 来 越 丰富 ,同时 也 对 互联 网 应 用 提出 了 更 高 的 要 求 。< /p> 
< footer><p> 发 表 于 2014.10.18< /p> < /footer> 
< /article> 


4.9 CSS 浏览 器 的 兼容 问题 


由 于 CSS 样式 以 及 页 面 各 种 元 素 在 不 同 浏览 器 中 的 表现 不 同 ,所 以 必须 考虑 网 页 代 
码 的 浏览 器 兼容 问题 。 要 解决 兼容 性 问题 ,一般 遵循 以 下 两 个 原则 : 

(1) 尽量 使 用 兼容 属性 ,因为 并 不 是 所 有 的 CSS 属性 都 存在 兼容 的 问题 ,所 以 如 果 使 
用 所 有 浏览 器 都 能 理解 一 致 的 属性 ,那么 兼容 的 问题 也 就 不 存在 了 。 

(2) 使 用 CSS hack 技术 ,CSS hack 技术 是 通过 被 某 些 浏览 器 支持 而 其 他 浏览 器 不 支 
持 的 语句 ,使 一 个 CSS 样式 能 够 按 开发 者 的 目的 被 特定 浏览 器 解释 或 者 不 能 被 特定 浏览 
器 解释 。 

下 面 介 绍 几 种 CSS hack 的 常用 技术 ,它们 是 针对 IE 6 及 以 上 浏览 器 和 Firefox 等 标 
准 浏览 器 兼容 问题 的 。 


1. 使 用 !important 关键 字 





前 面 已 经 介绍 过 !important 关键 字 的 用 途 , 如 果 在 同一 个 选择 器 中 定义 了 两 条 相 冲 
突 的 规则 (注意 是 在 同一 个 选择 器 中 ) ,那么 IE 6 总 是 以 后 一 条 为 准 , 不 认 !important ,而 
Firefox/IE 7 以 定义 了 limportant 的 为 准 。 例 如 : 


@_W.. 准 网 页 设计 与 PHP 


(1) .shagow div { 
background: url (images/top- left.png) no- repeat !irportant; 

/* Firefox、 焉 7 执行 这 一 条 * / 
background: url (images/top- left.gif) no- repeat; /* 下 6 执行 这 一 条 * / 
Padding: 0 px Grx 0; 

} 





(2) giv{margin:30px !importanty /x Firefox、IE 7 执行 这 一 条 x* / 
margin:28px; /* 亚 6 执行 这 一 条 * / 
} 

2. 在 属性 前 添加 “十 ”"“_” 号 兼容 不 同 浏览 器 


在 属性 前 添加 “十 ”号 可 区 别 IE 与 其 他 浏览 器 ,例如 : 


#demo div{ 
width:50px7 /x* FireFox 有 效 * / 
+width:60px; /* 下 有效 */ } 


那么 如 何 进一步 区 分 IE6 和 了 IE7 呢 ? 由 于 IE 7 不 支持 属性 前 加 下 划 线 “_” 的 写法 ， 
会 将 整 条 样式 忽略 ,而 IE 6 却 不 会 忽略 ,和 没 加 下 划 线 的 属性 同样 解释 。 例 如 : 


#demo div{ 
height :50px; /* FireFox 有 效 * / 
+ height:60px; /x* 正 7 有 效 */ 
_height:70px; /* 正 6 有 效 */ } 


3. 使 用 子 选择 器 和 属性 选择 器 等 IE 6 不 支持 的 选择 器 


由 于 IE 6 不 支持 子 选择 器 和 属性 选择 器 等 CSS 选择 器 ,可 以 用 它们 区 别 IE 6 和 其 
他 浏览 器 。 例 如 : 


html body { background- image: (bg.gif) } /x* 下 6 有 效 */ 
html> body { backgrond- image: (bg-png) } /x FireFox/IE 7 有 效 */ 


4. 使 用 IE 条 件 注释 


条 件 注释 是 IE 特有 的 功能 ,能 够 使 下 浏览 器 对 XHTML 代码 进行 单独 处 理 。 值 得 
注意 的 是 ,条 件 注释 是 一 种 HTML 的 注释 ,所 以 只 针对 HTML ,当然 也 可 以 将 CSS 通过 
行内 式 方 法 引入 到 html 中 ,让 CSS 也 可 以 应 用 到 条 件 注释 。IE 条 件 注释 的 使 用 方法 
如 下 : 


< 上 -if 焉 ]> 此 内 容 只 有 下 可见, 其 他 浏览 器 会 把 它 当成 注释 忽略 掉 < ![endif]--> 
< 上 =- [if 下 6.0]> 此 内 容 只 有 正 6.0 可 见 < ![endif]--> 
< 上 =- [if 下 7.0> 此 内 容 只 有 下 7.0 可 见 < ![endifl]--> 


条 件 注释 也 支持 感叹 号 “!” 非 操作 。 例 如 : 
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< 上 -=- [if ! 焉 6.0> 此 内 容 除 了 正 6.0 之 外 都 可 见 < ![endiflj--> 


条 件 注释 还 可 使 用 gt 表示 greater than, 指 当前 条 件 版 本 的 以 上 版 本 ,不 包含 当前 


版 本 。 


gte 表示 greater than or equal, 大 于 或 等 于 当前 条 件 版 本 ,表示 当前 条 件 版 本 和 以 上 
的 版 本 。 

同样 ,lt 表示 less than, 指 当前 条 件 版 本 的 以 下 版 本 ,不 包含 当前 条 件 版 本 。 

lte 表示 less than or equal, 当 前 条 件 版 本 和 它 的 以 下 版 本 。 例 如 : 


<!-- [if lte 下 6> 此 内 容 下 6 及 其 以 下 版 本 可 见 < ![endifl]--> 
<!-- [if gte 下 7]> 此 内 容 下 7 及 其 以 上 版 本 可 见 < ![endiflj--> 


6. 


习 题 4 


“下 列 ( ) 是 定义 CSS 样式 规则 的 正确 形式 。 


A. body {color= black} B. body:color= black 

C. body {color: black} D. {body;color:black} 
.下面 ( ) 方 式 不 是 CSS 中 颜色 的 表示 法 。 

A. #ffffff B. rgb(255,255,255) 

C. rgb(ff,ff,ff) D. white 


. 关于 浮动 ,下 列 ( ) 样式 规则 是 不 正确 的 。 


A. img { float: left; margin: 20px; } 
B. img { float: right; right: 30px; } 
C. img ( float: right; width: 120px; height: 80px; } 


D. img { float: left; margin-bottom: 2em; } 


. 关于 CSS 2. 1 中 的 背景 属性 ,下 列 说 法 正确 的 是 ( )。 


A. 可 以 通过 背景 相关 属性 改变 背景 图 片 的 原始 尺寸 大 小 
B. 不 可 以 对 一 个 元 素 设置 两 张 背景 图 片 

C. 不 可 以 对 一 个 元 素 同 时 设置 背景 颜色 和 背景 图 片 

D. 在 默认 情况 下 背景 图 片 不 会 平 铺 , 左 上 角 对 齐 


. CSS 中 定义 . outer {background-color: red;} 表示 的 是 ( We 


A. 网 页 中 某 一 个 ID 为 outer 的 元 素 的 背景 色 是 红色 的 

B. 网 页 中 含有 class 二 "outer" 元 素 的 背景 色 是 红色 的 

C. 网 页 中 元 素 名 为 outer 元 素 的 背景 色 是 红色 的 

D. 网 页 中 含有 class 王 ". outer" 元 素 的 背景 色 是 红色 的 

在 图 像 替 代 文 本 技术 中 ,为 了 隐藏 二 hl 二 标记 中 的 文本 ,同时 显示 hl 元 素 的 背景 


图 像 ,需要 使 用 的 CSS 声明 是 ( ss 


A. text-indent: -9999px; B. font-size:0; 


C. text-decoration: none; D. display: none; 
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7. 插入 的 内 容 大 于 盒子 的 边 距 时 ,如 果 要 使 盒子 通过 延伸 来 容纳 额外 的 内 容 。 在 溢 
出 (overflow) 选 项 中 应 选择 的 是 ( 





A. visible B. scroll C. hidden D. auto 
8. 举例 说 出 3 个 上 下 边界 (margin) 的 浏览 器 默认 值 不 为 0 的 元 素 、 


9. CSS 中 ,继承 是 一 种 机 制 , 它 允许 样式 不 仅 可 以 应 用 于 某 个 特定 的 元 素 ,还 可 以 应 








用 于 它 的 攻 

10. 如 果 要 使 网 页 中 的 背景 图 片 不 随 网 页 滚动 ,应 设置 的 CSS 声明 是 

11. 设 #title{padding: 6px 10px 4px}) , 则 ID 为 title 的 元 素 左 填充 是 

12. 如 果 要 使 下 面 代码 中 的 文字 变 红色 , 则 应 填 人 : 二 h2 二 课程 资 
源 二 /h2 二 

13. 下 列 各 项 描述 的 定位 方式 是 什么 ? (填写 static ,relative aboslute 中 的 一 项 或 
多 项 。) 


Q@ 元 素 以 它 的 包含 框 为 定位 基准 。 

@ 元 素 完全 脱离 了 标准 流 。 g 

@@ 元 素 相 对 于 它 原来 的 位 置 为 定位 基准 。 

@ 元 素 在 标准 流 中 的 位 置 会 被 保留 。 

@ 元 素 在 标准 流 中 的 位 置 会 被 其 他 元 素 占据 。 

@ 能 够 通过 z-index 属性 改变 元 素 的 层 释 次序 。 

14. 简 述 用 Dreamweaver 新 建 一 条 CSS 样式 规则 的 过 程 。 

15. 有 些 网 页 中 , 当 鼠 标 滑 过 时 , 超 链接 的 下 划 线 是 虚线 ,你 认为 这 是 怎么 实现 的 ? 

16. 为 图 4-28 中 的 栏目 表格 添加 CSS 代码 ,让 栏目 中 的 标题 字体 为 14px、 红 色 、 粗 
体 , 标 题 到 单元 格 左边 框 的 距离 为 12px。 让 第 二 行 中 的 文字 大 小 为 12px, 行 距 为 文字 大 
小 的 1.6 倍 ,文字 与 单元 格 四 周边 框 的 距离 均 为 10px, 段 落 前 空 两 格 。 

17. 简 述 制作 纯 CSS 下 拉 菜 单 的 原理 和 主要 步骤 。 

18. CSS 中 的 display 属性 和 visibility 属性 都 可 以 用 于 对 网 页 指定 对 象 的 隐藏 和 显 
示 , 它 们 的 效果 是 一 样 的 吗 ? 请 设计 一 个 实验 验证 。 

19. 在 HTML 中 插入 一 个 无 序列 表 和 一 个 有 序列 表 , 然 后 写 CSS 样式 ,定义 无 序列 
表 中 内 容 的 字体 为 14px、 黑 体 , 背 景色 为 #fed, 水 平 排列 ,无 项 目 编 号 。 定 义 有 序列 表 中 
的 内 容 的 字体 是 12px, 下 边框 为 1px 红色 虚线 ,然后 使 用 嵌入 式 的 方法 将 它 插入 到 
HTML 代码 的 正确 位 置 中 ,再 将 该 CSS 代码 分 别 转换 为 链接 式 和 行内 式 的 形式 。 

20. 在 HTML 代码 中 插入 一 个 a 元 素 , 然 后 用 CSS 设置 它 的 盒子 属性 ,要 求 盒 子 的 
填充 值 为 (上 6px、 下 : 4px\ 左 右 : 10px) ,边框 为 1px 红色 实 线 , 背 景 为 淡 红 色 ,并且 该 
盒子 能 在 浏览 器 中 完全 显示 出 来 。 





JavaScript 





网 页 有 时 需要 与 用 户 进行 交互 ,例如 ,响应 用 户 的 鼠标 键盘 操作 、 验 证 表单 数据 以 及 
动态 改变 HTML 元 素 的 外 观 等 ,这 些 都 需要 编写 浏览 器 端 程序 来 实现 。JavaScript 是 一 
种 浏览 器 的 编程 脚本 语言 ,专门 用 来 编写 浏览 器 程序 (也 称 为 客户 端 脚本 ) 。 


5.1 _ JavaScript 的 代码 结构 


JavaScript 是 事件 驱动 的 语言 。 当 用 户 在 网 页 中 进行 某 项 操作 时 ,就 产生 了 一 个 “ 事 
件 ”(event) 。 事 件 几 乎 可 以 是 任何 事情 : 单 击 一 个 网 页 元 素 、 拖 动 鼠 标 等 均 可 视 为 事件 。 
JavaScript 是 事件 驱动 的 , 当 事 件 发 生 时 , 它 可 以 对 之 做 出 响应 。 具 体 如 何 响应 某 个 事件 
由 编写 的 事件 处 理 程 序 决定 。 

因此 ,一 个 JavaScript 程序 一 般 由 * 事 件 十 事件 处 理 程序 组成。 根据 事件 处 理 程序 
所 在 的 位 置 ,在 HTML 代码 中 嵌入 JavaScript 有 三 种 方式 。 


1. 将 脚本 嵌入 到 HTML 标记 的 事件 中 (行内 式 ) 


HTML 标记 中 可 以 添加 “事件 属性 ”, 其 属性 名 是 事件 名 ,属性 值 是 JavaScript 脚本 
代码 。 例 如 (5-1. html): 


<html> <body> 
<P onclick= "alert ('Hello, The Web World!');"> Click Here< /p> 
< /body> < /html> 
其 中 ,onclick 就 是 一 个 JavaScript 事件 名 ,表示 单 击 鼠标 事件 .“alert(…);” 是 事件 处 理 
代码 ,作用 是 弹出 一 个 警告 框 。 因 此 , 当 在 这 个 p 元 素 上 单 击 时 ,就 会 弹出 一 个 警告 框 , 运 
行 效果 如 图 5-1 所 示 。 


aScript 程 讨 = x| 







click, Her 


单 击 此 处 


全 二 


图 5-1 5-1. html 和 5-2. html 的 运行 效果 
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2. 使 用 一 script 一 标记 将 脚本 其 入 到 网 页 中 (其 入 式 ) 





如 果 事 件 处 理 程 序 的 代码 很 长 , 则 一 般 把 事件 处 理 程 序 写 在 一 个 函数 ( 称 为 事件 处 


理 函 数 ) 中 ,然后 在 事件 属性 中 调用 该 函数 。 下 面 代码 的 运行 效果 与 5-1. html 完全 
相同 。 
<htm> <head> ==-2hinl ==» 
<title> 第 一 个 Javascript 程序 < /title> 
< script> 
function msg () { // 定 义 函 数 msg 
alert ("Hello, the WEB world!"); } 
< /script> < /head> 
<body> 
<p onclick= "msg()"> Click Here< /p> <!-- 通 过 事件 调用 函数 --> 
< /body> < /html> 


其 中 ,“onclick 二 "msg()"” 表 示 调 用 函数 msg。 可 见 , 调 用 JavaScript 函数 可 写 在 HTML 
标记 的 事件 属性 中 ,但 函数 的 代码 必须 写 在 二 script 二 二 /script 二 标记 之 间 。 

将 JavaScript 代码 写成 函数 的 一 个 好 处 是 ,可 以 让 多 个 HTML 元 素 或 不 同事 件 调用 
同一 个 函数 ,从 而 提高 了 代码 的 重用 性 。 

提示 : 二 script 二 标记 是 专门 用 来 在 HTML 中 谈 入 JavaScript 代码 的 标记 。 建 议 将 
所 有 的 JavaScript 代码 都 写 在 一 script 二 一 /script 二 标记 之 间 ,而 不 要 写 在 HTML 标记 
的 事件 属性 内 。 这 可 实现 HTML 代码 与 JavaScript 代码 的 分 离 。 


3. 使 用 一 script 一 标记 的 src 属性 链接 外 部 脚本 文件 (链接 式 ) 


如 果 有 多 个 网 页 文件 需要 共用 一 段 JavaScript, 则 可 以 把 这 段 脚 本 保存 成 一 个 单独 
的 .js 文件 (JavaScript 外 部 脚本 文件 的 扩展 名 为 js) ,然后 在 网 页 中 调用 该 文件 ,这 样 既 提 
高 了 代码 的 重用 性 ,也 方便 了 维护 ,修改 脚本 时 只 需 单 独 修改 这 个 js 文件 的 代码 。 

引用 外 部 脚本 文件 的 方法 是 使 用 二 script 二 标记 的 src 属性 来 指定 外 部 文件 的 URL。 
示例 代码 如 下 (5-3. html 和 5-3. js 位 于 同一 目录 下 ) ,运行 效果 如 图 5-1 所 示 。 


<htm><body> 

< script type= "text/JavaScript" src= "5- 4.js ">< /script> 
<p onclick= "msg()"> Click Here< /p> 

< /pody> < /html> 


finction msg () { // 定 义 函数 msg 
alert ("Hello, the WEB world!"); } 
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5.2 JavaScript 的 事件 编程 
编写 JavaScript 程序 需要 确定 三 个 要 素 : 即 触发 程序 执行 的 事件 .事件 处 理 程序 和 
获取 事件 作用 的 HTML 元 素 (DOM 对 象 ) 。 


5.2.1 常用 JavaScript 事件 


对 于 用 户 而 言 ,常用 的 JavaScript 事件 可 分 为 鼠标 事件 .HTML 事件 和 键盘 事件 三 
类 ,其 中 常用 的 鼠标 事件 如 表 5-1 所 示 , 常 用 的 HTML 事件 如 表 5-2 所 示 。 





表 5-1 鼠标 事件 的 种 类 
























































事 件 名 描 述 

onclick 单 击 鼠标 左 键 时 触发 

ondbclick 双击 鼠标 左 键 时 触发 

onmousedown 鼠标 任意 一 个 按键 按 下 时 触发 

onmouseup 松 开 鼠 标 任意 一 个 按键 时 触发 

onmouseover 鼠标 移动 到 元 素 上 时 触发 

onmouseout 鼠标 移出 该 元 素 边界 时 触发 

onmousemove 鼠标 指针 在 某 个 元 素 上 移动 时 持续 触发 

表 5-2 常用 的 HTML 事件 

事 件 名 描 述 
onload 页 面 完全 加 载 后 在 window 对 象 上 触发 ,图 片 加 载 完 成 后 在 其 上 触发 
onunload 页 面 完全 印 载 后 在 window 对 象 上 触发 ,图 片 印 载 完成 后 在 其 上 触发 
onerror 脚本 出 错时 在 window 对 象 上 触发 ,图 像 无 法 载 和 时 在 其 上 触发 
onselect 选择 了 文本 框 的 某 些 字符 或 下 拉 列 表 框 的 某 项 后 触发 
onchange 文本 框 或 下 拉 框 内 容 改 变 时 触发 
onsubmit 表单 提交 时 (如 单 击 提交 按钮 ) 在 表单 form 上 触发 
onblur 任何 元 素 或 窗口 失去 焦点 时 触发 
onfocus 任何 元 素 或 窗口 获得 焦点 时 触发 
onscroll 浏览 器 的 滚动 条 滚动 时 触发 





对 于 某 些 元 素来 说 ,还 存在 一 些 特 殊 的 事件 ,例如 body 元 素 就 有 onresize( 当 窗口 改 
变 大 小 时 触发 ) 和 onscroll( 当 窗口 滚动 时 触发 ) 这 样 的 特殊 事件 。 

键盘 事件 相对 来 说 用 得 较 少 ,主要 有 keydown( 按 下 键盘 上 某 个 按键 触发 ) keypress 
( 按 下 某 个 按键 并 且 产 生 了 字符 时 才 触 发 , 即 忽略 Shift、Alt 等 功能 键 ) 和 keyup( 释 放 按 
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键 时 触发 )。 通 常 键盘 事件 只 有 在 文本 框 中 才 显 得 有 实际 意义 。 
提示 : JavaScript 事件 名 应 该 全 部 小 写 , 因 为 JavaScript 代码 是 区 分 大 小 写 的 ,但 是 
HTML 标记 中 的 事件 属性 名 却 是 不 区 分 大 小 写 的 。 


5.2.2 事件 监听 程序 


实际 上 ,事件 除了 可 写 在 HTML 标记 中 ,还 可 以 “对 象 . 事件 ”的 形式 出 现 ,这 称 为 事 
件 监听 程序 。 其 中 对 象 可 以 是 DOM 对 象 、 浏 览 器 对 象 或 JavaScript 内 置 对 象 。 下 面 采 
用 事件 监听 程序 的 方式 重 写 5-2. html, 代 码 如 下 : 








<htm><head> 
< Script> 
Var demp= document .getElementById ("demo"); 
/* 获取 认为 dam 的 HEL 元 素 ,由 于 该 BEL 元 素 的 代码 在 后 面 ,此 时 尚未 载 入 ,会 发 生 " 对 象 不 
存在 "的 错误 * / 
Gem.onclick=msg7 //adem 对 象 单 击 时 执行 msg 函数 
function msg() { 
alert ("Hello, the WEB world!"); } 
< /script>< /head> 
<body> 
<p ic "demo"> Click Here< /p> 
< /body> < /htm> 


其 中 ,为 p 元 素 添加 了 一 个 id 属性 ,是 为 了 使 JavaScript 脚本 方便 获取 该 元 素 。 通 
过 document. getElementByld("demo") 方 法 就 可 根据 id 访问 这 个 元 素 ,该 方法 返回 的 结 
果 是 一 个 DOM 对 象 . demo。 

然后 ,通过 “DOM 对 象 . 事件 名 三 函数 名 ”就 能 设置 该 对 象 在 事件 发 生 时 将 执行 的 
函数 。 

但 是 ,该 程序 运行 会 出 错 ,原因 在 于 : 浏览 器 是 从 上 到 下 依次 执行 网 页 代码 的 。 当 执 
行 到 获取 id 为 demo 的 HTML 元 素 时 ,由 于 该 HTML 元 素 的 代码 在 下 面 ,浏览 器 此 时 
尚未 载 人 该 元 素 ,就 会 发 生 对 象 不 存在 的 错误 。 要 消除 该 错误 ,有 以 下 两 种 办 法 。 

(1) 把 JavaScript 脚本 放 在 该 HTML 元 素 代码 的 下 面 。 修 改 后 的 代码 如 下 : 


<html> <body> 
<p ic "demo"> Click Here< /E> 
<script> 
Var Gemo= dooument. .getElementById ("Gemo") ; /将 该 语句 放 在 dam 元 素 的 后 面 
dap.onclick= msg; 
finction msg() { 
alert ("Hello, the WEB world!"); } 


< /body> < /html> 
运行 该 程序 ,就 能 得 到 如 图 5-1 所 示 的 运行 结果 了 。 
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(2) 把 获取 HTML 元 素 的 代码 写 在 windows. onload 事件 中 ,这 样 就 可 避免 只 能 把 
JavaScript 代码 写 在 HTML 元 素 下 面 的 麻烦 ,其 中 ,windows. onload 事件 表示 浏览 器 载 
入 网 页 完毕 时 触发 ,这 时 所 有 的 HTML 元 素 都 已 经 载 人 到 浏览 器 中 ,无 论 将 JavaScript 
代码 放置 到 任何 位 置 都 不 会 产生 找 不 到 对 象 的 错误 。 修 改 后 的 代码 如 下 : 


<html> <body> 

< script> 

window.onload= function () { // 表 示 在 网 页 载 入 完毕 后 执行 函数 

Var demp= document .getElementById ("demo"); 

} 

demo.onclicke= meg; 

function msg() { 

alert ("Hello, the WEB world!"); 和 

< /script> 

<p id= "Gemo"> Click Here< /p> 

< /body> < /html> 

提示 : 

(1) 程序 中 的 “对 象 . 事件 名 ”后 只 能 接 函 数 名 ,而 绝对 不 能 接 函数 名 加 括号 。 例 如 ， 
demo. onclick 王 msg 绝对 不 能 写成 demo. onclick 王 msg() ,因为 函数 名 表示 调用 函数 ,而 
子 数 名 带 括号 表示 运行 函数 。 

(2) demo. onclick 王 msg; 可 放 在 window. onload 二 function(){…) 语 名 外 ,因为 单 击 
事件 发 生 时 网 页 肯定 已 载 入 完毕 了 。 

(3) var 是 JavaScript 声明 变量 的 关键 词 ,JavaScript 的 变量 是 一 种 弱 类 型 变量 ,任何 
类 型 的 变量 声明 都 用 var, 甚 至 可 以 不 声明 变量 直接 使 用 。 

(4) JavaScript 代码 是 严格 区 分 大 小 写 的 ,每 条 语句 一 般 以 “;” 号 结束 。 


5.3 JavaScript DOM 编程 


5.3.1 动态 效果 的 实现 


很 多 网 页 中 都 存在 一 些 动态 效果 ,比如 鼠标 滑动 到 某 个 文本 或 图 像 上 时 ,文本 或 图 像 
会 发 生变 化 ,或 者 消失 ,或 者 变 大 变 小 等 ,这 些 都 是 用 JavaScript 程序 实现 的 。 编 写 动 态 
效果 程序 的 一 般 步 又 是 : 

(1) 找到 要 实现 动态 效果 的 对 象 (网 页 元 素 ); 

(2) 为 其 添加 事件 ; 

(3) 编写 事件 处 理 函 数 ; 

(4) 在 事件 处 理 函 数 中 通过 改变 网 页 元 素 的 属性 或 内 容 来 实现 动态 效果 。 

下 面 是 一 个 例子 , 当 鼠 标 滑动 到 标题 文字 上 时 ,标题 文字 和 它 下 方 的 图 片 就 会 发 生变 
化 ,效果 如 图 5-2 所 示 ,代码 如 下 : 


<html> <body> 
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<h2 icF "tit"> 会 变 的 图 片 < /h2> 
< img src= "images/picl.jpg" id "picl"/> 





< script> // 必 须 写 在 picl 元 素 后 面 

var imgl= dbcument.getElementById ("pic1"); /获取 认为 picl 的 元 素 

var tit= document .getElementById ("tit"); /获取 i 为 tit 的 元 素 

tit.onmpuseover= change; // 当 鼠标 滑动 到 tit 元 素 上 时 调用 change 函数 

finction change (){ 
imgl.src= "images/pic2.jpg"; // 设 置 imgl 的 src 属 性 为 另 一 张 图 片 
tit.innerHIM= "看 到 变化 了 吗 "; 1/ 设置 tit 的 内 容 为 另 一 个 文本 

} 

< /script> 

< /pody> < /html> 
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图 5-2 鼠标 滑动 到 标题 上 文字 和 图 片 发 生变 化 的 效果 
下 面 分 别 讲述 动态 效果 程序 编写 时 每 一 步 的 实现 方法 。 
5.3.2 获取 指定 元 素 


在 JavaScript 中 ,一 般 是 根据 HTML 元 素 的 ID 属性 或 name 属性 或 标记 名 ,获取 指 
定 的 元 素 , 并 返回 一 个 DOM 对 象 ( 或 数组 )。document 对 象 提供 了 如 下 3 个 相关 方法 。 

(1) getElementById(): 根据 HTML 元 素 的 ID 属性 访问 该 元 素 , 并 返回 一 个 DOM 
对 象 。 

(2) getElementsByName() : 根据 HTML 元 素 的 name 属性 访问 该 组 元 素 ,并 返回 
一 个 DOM 对 象 数组 ,常用 在 访问 表单 元 素 中 。 

(3) getElementsByTagName(): 根据 HTML 元 素 的 标记 名 访问 该 组 元 素 , 并 返回 
一 个 DOM 对 象 数组 。 

其 中 ,getElementById() 是 最 常用 的 方法 ,只 要 给 HTML 元 素 设 置 了 ID 属性 ,就 可 
用 该 方法 访问 元 素 。 而 由 于 后 面 两 个 方法 返回 的 是 数组 ,所 以 要 使 用 它们 获取 单个 
HTML 元 素 ,必须 添加 数组 下 标 ,例如 : 


Var tj= document .getElementsByName ("tj") [1]; // 获 取 第 二 个 name 属 性 为 十 的 元 素 
var mul= document.getElementsBYTagName ("U1") [0]; // 获 取 第 一 个 <u> 标 记 的 元 素 


1. 添加 事件 


在 获取 了 要 发 生 交互 效果 的 HTML 元 素 后 ,就 可 给 它 添 加 事件 。 添 加 事件 可 采用 
HTML 事件 属性 或 事件 监听 程序 。 推 荐 使 用 事件 监听 程序 ,以 实现 HTML 代码 与 
JavaScript 代码 的 分 离 。 例 如 


var tit= document. .getElementById ("tit"); // 获 取 ia 为 tit 的 元 素 

tit. = change; /为 tit 元 素 添加 事件 ,并 设置 事件 处 理 函 数 

接 下 来 ,就 可 编写 事件 处 理 函 数 ,在 事件 处 理 函数 中 ,动态 效果 一 般 是 通过 改变 
HTML 元 素 的 内 容 、 属 性 或 CSS 属性 实现 的 。 

2. 访问 元 素 的 HTML 属性 

当 获 取 到 指定 的 HTML 元 素 (DOM 对 象 ) 后 ,就 可 使 用 *DOM 对 象 . 属性 名 ”来 访问 
元 素 的 HTML 属性 了 。 该 属性 是 可 读 写 的 , 读 取 和 设置 元 素 的 HTML 属性 的 方法 是 : 


变量 =paM 对 象 .属性 名 // 读 取 元 素 的 HE 属性 

DaM 对 象 .属性 名 = 属性 值 // 设 置 元 素 的 HML 属 性 

下 面 是 一 个 例子 , 当 鼠 标 滑动 到 文字 上 (p 元 素 ) 时 ,改变 该 元 素 的 align 属性 ,使 文字 
左右 跳动 ,效果 如 图 5-3 所 示 ,代码 如 下 : 
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图 5-3 文字 左右 移动 效果 


<p ic "mov" align= "Jeft"> 跳 动 的 文字 < /p> 


< script> // 必 须 写 在 mw 元 素 后 面 
Var mov= document. .getElementById ("mov"); // 获 取 i 为 mov 的 元 素 
mov.cnmpuseover= change; // 当 鼠标 滑动 到 mov 元 素 上 时 调用 change 函数 
finction change () { 

if (mv.align== "left") { // 读 取 mov.align 属 性 并 比较 

mov.alignr "right";} // 设置 mov.align 属 性 的 值 

else mov.align= "left"; } 

< /script> 


提示 : 该 例 中 mov. align 也 可 写 为 this. align, 在 JavaScript 中 ,如 果 this 放置 在 函数 
体内 ,那么 this 指 代 调用 该 函数 的 事件 前 的 对 象 。 
5.3.3 访问 元 素 的 CSS 属性 


访问 元 素 的 CSS 属性 可 以 使 用 "DOM 对 象 . style. CSS 属性 名 ”的 方法 。 该 CSS 属 
性 也 是 可 读 写 的 , 读 取 和 设置 元 素 的 CSS 属性 的 方法 如 下 : 
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变量 =DOM 对 象 . style.css 属 性 名 // 读 取 元 素 的 css 属性 
DM 对 象 .style.css 属 性 名 = 属性 值 // 设 置 元 素 的 css 属性 


下 面 是 一 个 例子 , 当 鼠 标 滑动 到 文字 “沙漠 古 堡 * 上 时 ,第 一 张 图 片 就 会 变 大 ,同时 第 
二 张 图 片 会 消失 ,效果 如 图 5-4 所 示 ,代码 如 下 : 
E TO = E TU eT 
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避 
图 5-4 图 片 变 大 或 消失 的 效果 





<html> <body> 
<b ic "tit"> 沙漠 十 堡 < /b> gnbsp;<b id= "tit2"> 天 山 冰 湖 < /b><br> 
< img src= "images/picl .jpg" icF "picl" width= "75"/> 
< img src= "images/pic2.jpg" icF "pic2" width= "75"/> 


< script> // 必 须 写 在 HPML 元 素 后 面 
var picl= document.getElementById("piclm)7 // 获 取 这 为 picl 的 元 素 
var pic2- document .getElementById ("pic2"); // 获 取 认为 pic2 的 元 素 
Var tit= document .getElementById ("tit"); // 获 取 过 为 tit 的 元 素 
tit .onmpuseover= change; // 当 鼠标 滑动 到 tit 元 素 上 时 调用 change 函数 
finction change () { 
pic2.style.display= "none"; // 隐 藏 pic2 
picl.style.width= "140px"; // 设 置 picl 的 宽度 值 ,使 它 变 大 
picl.style.borderLeft= "10px solid red"; // 设 置 picl 的 左边 框 值 
} 
< /script> 
< /pody> < /html> 
说 明 : 


(1) CSS 样式 设置 必须 符号 CSS 规范 ,否则 该 样式 会 被 忽略 。 

(2) 如 果 样 式 属 性 名 称 中 不 带 “-” 号 ,例如 color, 则 直接 使 用 style. color 就 可 访问 该 
属性 值 ;如 果 样 式 属性 名 称 中 带 有 “-” 号 ,例如 font-size, 则 对 应 的 style 对 象 属 性 名 称 为 
fontSize。 转 换 规则 是 去 掉 属 性 名 称 中 的 “-”, 再 把 后 面 单词 的 第 一 个 字母 大 写 。 又 如 
border-left-style, 对 应 的 style 对 象 属性 名 称 为 borderLeftStyle。 

(3) 对 于 CSS 属性 float ,不 能 使 用 style. float 访问 ,因为 float 是 JavaScript 的 保留 
字 , 要 访问 该 CSS 属性 ,在 I 中 应 使 用 style. styleFloat, 在 Firefox 中 应 使 用 style. 


cssFloat 。 
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(4) 使 用 style 对 象 只 能 读 取 到 元 素 的 行内 样式 ,而 不 能 读 取 元 素 所 有 的 CSS 样式 。 
如 果 将 HTML 元 素 的 CSS 样式 改 为 蔡 入 式 的 话 , 那 么 style 对 象 是 访问 不 到 的 。 因 此 
style 对 象 获 取 的 属性 与 元 素 最 终 显示 效果 并 不 一 定 相同 ,因为 可 能 还 有 非 行内 样式 作用 


于 元 素 。 


(5) 如 果 使 用 style 对 象 设置 元 素 的 CSS 属性 ,而 设置 的 CSS 属性 和 元 素 原 有 的 任 
何 CSS 属性 冲突 ,由 于 style 会 对 元 素 增加 一 个 行内 CSS 样式 属性 ,而 行内 CSS 样式 的 


优先 级 最 高 ,因此 通过 style 设置 的 样式 一 般 为 元 素 的 最 终 样式 。 
5.3.4 访问 元 素 的 内 容 
如 果 要 访问 或 设置 元 素 的 内 容 , 一 般 使 用 innerHTML 属性 。 


innerHTML 可 以 将 元 


素 的 内 容 ( 位 于 起 始 标记 和 结束 标记 之 间 ) 改 变 成 其 他 任何 内 容 ( 如 文本 或 HTML 元 
素 )。innerHTML 虽然 不 是 DOM 标准 中 定义 的 属性 ,但 大 多 数 浏览 器 却 都 支持 它 , 因 此 


不 必 担 心 浏览 器 兼容 问题 。 


下 面 是 一 个 例子 。 当 选中 表单 中 的 复 选 框 后 ,将 在 span 元 素 中 添加 内 容 ( 文 字 和 文 


本 框 ); 若 取消 选中 复 选 杠 则 清空 span 元 素 的 内 容 。 效 果 如 图 5-5 
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所 示 。 代 码 如 下 : 








您 有 小 孩 吗 ? 有 : 噩 





图 5-5 利用 innerHTML 改变 元 素 的 内 容 


< form name= "userInfo" method= "post" action= "> 您 有 小 孩 吗 ? 有 : 
< input type= "checkbox" name= "hasBoy" idF "hasBoy" value= "1" 
onclick= "check()" /> 
< span id= "add"> gnbsp;< /span> < /form> 
<script> 
finction check(){ 
Var hasboy= document.forms ["userInfo"] .hasBoy; 
Var addF= document .getElementById ("add") ; // 获 取 acd 元 素 
if (hasboy.checked) 





add.innerHIM= "有 几 个 < input type= 'text' name= 'textfield' />"; 


else add.innerHIM="™"; } // 设 置 aaa 元 素 的 内 容 
</script> 


5.4 ”使 用 浏览 器 对 象 


JavaScript 是 运行 在 浏览 器 中 的 ,因此 提供 了 一 系列 对 象 用 于 与 浏览 器 进行 交互 。 


这 些 对 象 主 要 有 window、document location、history 和 screen 等 ,它们 统称 为 BOM 


(Browser Object Model ,浏览 器 对 象 模 型 ) 。 


window 对 象 是 整个 BOM 的 核心 ,所 有 其 他 对 象 和 集合 都 以 某 种 方式 与 window 对 


的 
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象 关 联 , 如 图 5-6 所 示 。 
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图 5-6 BOM 对 象 关系 图 




















下 面 介绍 几 个 最 常用 对 象 的 含义 和 用 途 。 
1. document 对 象 


document 对 象 表示 网 页 文档 ,该 对 象 具有 很 多 集合 ,如 forms \links images 等 ,分 别 
表示 网 页 中 所 有 的 表单 , 超 链接 和 图 像 等 集合 。 因 此 访问 表单 和 表单 中 的 元 素 可 以 使 用 


forms 集合 ,例如 : 
cocument. .forms [0] .user.value; // 网 页 第 一 个 表单 中 name 属 性 为 user 元 素 的 value 值 
document..forms ["data"] .mail; // 名 称 为 data 的 表单 中 name 属 性 为 mail 的 元 素 


document 对 象 还 具有 write 方法 ,用 来 向 网 页 中 动态 输出 文本 ,例如 : 
< script> document.write ("这 是 第 一 行 叶 "<br />");< /scripty<!-- 在 网 页 中 输出 一 行文 本 --> 


但 要 注意 的 是 ,document. write 方法 只 能 在 文档 尚未 载 人 到 浏览 器 时 输出 文本 ,如 
果 文 档 已 载 和 人 完毕 , 则 document. write 会 清空 当前 文档 内 容 再 输出 ,例如 ; 


< script> 
finction msg () { 

ooment.write("Hello!"); 】} // 答 出 时 会 清空 原 网 页 内 容 
< /script> 


<p onclick= "msg()"> Click Here< /E> 


由 于 单 击 p 元 素 时 ,文档 内 容 已 载 和 完毕 ,所 以 单 击 时 , 原 网 页 内 容 会 被 清空 ,再 输出 
字符 串 “Hello!”。 因 此 ,document. write 方法 不 适合 于 在 程序 调试 时 输出 中 间 结 果 , 在 
JavaScript 中 ,这 个 任务 一 般 是 由 alert 方法 完成 。 


2. location 对 象 

location 对 象 表示 浏览 器 的 URL 地 址 ,该 对 象 主要 用 来 设置 或 分 析 浏 览 器 的 URL， 
使 浏览 器 发 生 转 向 ,例如 ,要 使 浏览 器 跳 转 到 login. htm 页 面 ,代码 如 下 : 

< script> location.href= "ogin.htm";< /script> 


其 中 location. href 是 最 常用 的 属性 ,用 于 获得 或 设置 窗口 的 URL, 改 变 该 属性 的 值 
就 可 以 导航 到 新 的 页 面 。 实 际 上 ,Dreamweaver 中 的 跳 转 菜单 就 是 采用 下 拉 菜 单 结合 
location. href 属性 实现 的 。 下 面 是 一 个 跳 转 菜单 的 代码 : 
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< select name= "select" onchange= "location.href= this.options [this.selectedIndex] .value"> 
<cption> 请 选择 需要 的 网 址 < /option> 
<cption value= "http://www.schu.com"> 搜 狐 < /option> 
< option value= "http://www.sina.com"> 新 浪 < /option> 
< /select> 
如 果 不 希 望 跳 转 后 用 户 可 以 用 “后 退 ” 按 钮 返回 原来 的 页 面 ,可 以 使 用 replace() 方 
法 ,该 方法 也 能 转 到 指定 的 页 面 ,但 不 能 返回 到 原来 的 页 面 了 ,这 常用 在 注册 成 功 后 禁止 
用 户 后 退 到 填写 注册 资料 的 页 面 。 例 如 : 


<p onclick= "location.replace('http://www.sohu.coom"); 吃 搜狐 < /p> 
可 以 发 现 , 转 到 新 页 面 后 ,“ 后 退 ” 按 钮 是 灰色 的 了 。 
3. history 对 象 


history 对 象 主要 用 来 控制 浏览 器 后 退 和 前 进 。 它 可 以 访问 历史 页 面 ,但 不 能 获取 到 
历史 页 面 的 URL。 下 面 是 history 对 象 的 一 些 用 法 : 


history.back()7 // 浏 览 器 后 退 一 页 ,等 价 于 history.go(- ID; 
history.forward()7 // 浏 览 器 前 进 一 页 ,等 价 于 history.go (1); 
history.go(0); // 刷 新 当前 网 页 ,等 价 于 location.reload(); 
document .write (history.length); // 输 出 浏览 历史 的 记录 总 数 

4. window 对 象 


window 对 象 对 应 浏览 器 的 窗口 ,使 用 它 可 以 直接 对 浏览 器 窗口 进行 各 种 操作 。 
window 对 象 提 供 的 主要 功能 可 以 分 为 5 类 ， 

(1) 调整 窗口 的 大 小 和 位 置 ; 

(2) 打开 新 窗口 或 关闭 窗口 ; 

(3) 产生 系统 对 话 框 ; 

(4) 状态 栏 控制 ; 

(5) 定时 操作 。 


下 面 举 几 个 例子 : 

window.open ("pop.html",，"new"，"width= 400, height= 300"); ”// 打 开 一 个 新 窗口 
window.moveTo (200, 300); // 移 动 窗口 到 指定 坐标 位 置 
window.close (); // 关 闭 当 前 窗口 
window.status= "看 看 状态 栏 中 的 文字 变化 了 吗 ?"; // 修 改 状态 栏 内 容 
S. 系统 对 话 框 


window 对 象 有 3 个 生成 系统 对 话 框 的 方法 ,分 别 是 alert(Lmsg]) 、confirm([msg]) 
和 prompt([Lmsg][，default]) 。 由 于 window 对 象 可 以 省 略 ,因此 一 般 直 接 写 方法 名 。 

(1) alert 方法 用 于 弹出 警告 框 ,在 框 中 显示 参数 msg 的 值 , 其 效果 如 图 5-7 所 示 。 

(2) confirm 方法 用 于 生成 确认 提示 框 ,其 中 包括 “确定 ”和 “取消 ”按钮 。 当 用 户 单 击 
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“确定 ”按钮 时 ,该 方法 将 返回 true; 单 击 “ 取 消 ” 按 钮 时 , 则 返回 false, 其 效果 如 图 5-8 所 
示 , 代 码 如 下 : 
if(confimm(" 哨 实 要 删除 吗 ?")) // 弹 出 确认 提示 框 


alert ("图片 正在 删除 …"); 
else alert ("已 取消 删除 !"); 








| 


-一 一 


图 5-7 确认 提示 框 confirm() 图 5-8 消息 提示 框 prompt() 





(3) prompt 方法 用 于 生成 消息 提示 框 , 它 可 接受 用 户 输入 的 信息 ,并 将 该 信息 作为 
函数 的 返回 值 。 该 方法 接受 两 个 参数 :第 一 个 参数 是 显示 给 用 户 的 文本 ,第 二 个 参数 为 文 
本 框 中 的 默认 值 ( 可 为 空 ) 。 其 效果 如 图 5-9 所 示 ,代码 如 下 : 

var nInput= prampt ("请 输入 :\n 你 的 名 字 ""™); // 弹 出 消息 提示 框 


ifEInput 王 null) // 如 果 用 户 输入 的 值 不 为 空 
aocument.write ("Hello! "+nInput); 


6. 定时 函数 


window 对 象 提 供 了 两 个 定时 函数 ,分 别 是 setInterval() 和 setTimeout()。 定 时 函数 
是 JavaScript 制作 网 页 动画 效果 的 基础 ,例如 ,网 页 上 的 漂浮 广告 ,就 是 每 阳 几 毫秒 更 新 
一 下 漂浮 广告 的 显示 位 置 。 下 面 分 别 介绍 这 两 个 函数 。 

(1) setInterval() 函数 用 于 每 隔 一 段 时 间 执 行 指定 的 代码 。 需 要 注意 的 是 , 它 会 创建 
间隔 ID , 若 不 取消 将 一 直 执 行 ,直到 页 面 印 载 为 止 。 因 
此 如 果 不 需 要 了 ,应 使 用 clearInterval 取消 该 函数 ,以 防 Fr) 
止 它 占用 不 必要 的 系统 资源 。 2009 年 7 月 31 日 10:06:51 

利用 setInterval() 周 期 性 地 执行 显示 当前 时 间 的 脚 一 
本 ,就 可 在 页 面 上 显示 不 停 走动 的 时 钟 ,其 效果 如 图 5-9 图 5-9 时 钟 显示 效果 
所 示 ,代码 如 下 : 


= 口 | x| 





<body onload "init ()™> 
<div id- "clock™> < /div> 

< script> 

var clock= document .getElementById("clock"); ””// 获 取 clock 元 素 

finction disp() { 

// 将 时 间 显示 在 clock 的 giv 中 ,new pate() 获 取 系 统 时 间 , 并 转换 为 本 地 格式 
Clock.innerHIM= "< b> "+ (new Date()) .toLocaleString()+ "< /p> "; } 

fimction init() { 
setInterval (disp, 1000); ””// 每 隔 1 秒 钟 执行 一 次 sisp0 } 
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< /script>< /body> 


(2) setTimeout() 函 数 用 于 在 一 段 时间 之 后 执行 指定 的 代码 ,这 可 用 于 某 些 需 要 延 
时 的 场合 。 如 果 通 过 递归 调用 ,该 函数 也 能 实现 周期 性 地 执行 脚本 。 


习 题 5 


1. 计算 一 个 数组 x 的 长 度 的 语句 是 ( Ws 
A. var aLen=x. length(); B. var aLen=x. len(); 


C. var aLen=x. length; D. var aLen= x. len; 


2. 下 列 JavaScript 语句 将 显示 ( ) 结 果 。 


Var al= 10; Var a2= 20; alert ("alt a2= "+al+ a2); 


A. al 十 a2 王 30 B. al 十 a2 王 1020 
C. al 十 a2 王 al 十 a2 D. "al 十 a2 王 "1020 
3. 表达 式 "123abc" 一 123 的 计算 结果 是 ( ) 。 
A."abc" BQ GC, 一 122 D. NaN 
4. 产生 当前 日 期 的 方法 是 (  )。 
A. Now(); B. date(); C. new Date(); D. new Now(); 


5. 下 列 ( ) 可 以 得 到 文档 对 象 中 的 一 个 元 素 对 象 。 
A. document,. getElementById(" 元 素 id 名 ") 
B. document. getElementByName(" 元 素 名 ") 
C. document. getElementByTagName( "标记 名") 
D. 以 上 都 可 以 
6. 如 果 要 改变 元 素 志 div id 二 "userInput" 记 … 达 /div 记 的 背景 颜色 为 蓝 色 , 代 码 
是 ( ) 。 
A. document. getElementById("userInput"). style. color= "blue"; 
B. document. getElementByld("userInput"). style. divColor= "blue"; 
C. document. getElementByld("userInput"). style. background-color= "blue"; 
D. document. getElementByld("userInput"). style. backgroundColor= "blue"; 
7. 通过 innerHTML 的 方法 改变 某 一 div 元 素 中 的 内 容 ( 。”)。 
A. 只 能 改变 元 素 中 的 文字 内 容 B. 只 能 改变 元 素 中 的 图 像 内 容 
C. 只 能 改变 元 素 中 的 文字 和 图 像 内 容 ” D. 可 以 改变 元 素 中 的 任何 内 容 
8. 下 列 选项 中 ,( ) 不 是 网 页 中 的 事件 。 


A. onclick B. onmouseover 

C. onsubmit D. onmouseclick 
9. JavaScript 中 自 定义 对 象 时 使 用 关键 字 ( ) 。 

A. Object B. Function 


C. Define D. 以 上 三 种 都 可 以 
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10. 以 下 哪 条 语句 不 能 为 对 象 obj 定义 值 为 22 的 属性 age? ( ) 











A. obj. "age" 一 22; B. obj. age 一 22; 
C. obj[L"age"] 王 22; D. obj= {age:22}; 
11. 下 面 哪 一 条 语句 不 能 定义 函数 f()? ( 
A. function {0()(); B. var {=new Function("(}"); 
C. var {f=function(){}; DS 
i 对 象 表 示 浏 览 器 的 窗口 ,可 用 于 检索 关于 该 窗口 状态 的 信息 。 
13. var a=10; var b=20; var c=10; alert(a=b); alert(a==b); alert(a= =¢); 
执行 结果 是 


14. 试 说 明 以 下 代码 输出 结果 的 顺序 ,并 解释 其 原因 ,最 后 在 浏览 器 中 验证 。 

< script> setTimeout (function(){ alert ("A"); },0); 

alert ("B"); < /script> 

15. 编写 代码 实现 以 下 效果 : 打开 一 个 新 窗口 ,原始 大 小 为 400X300px, 然 后 将 窗口 
逐渐 增 大 到 600X450px, 保 持 窗口 的 左上 角 位 置 不 变 。 

16. 用 JavaScript 编写 计算 器 程序 ,实现 第 9 章 图 9-21 中 的 计算 器 程序 效果 。 
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目前 互联 网 上 绝 大 多 数 网 站 都 是 动态 网 站 ,简单 地 说 ,动态 网 站 是 一 种 使 用 HTTP 
( 超 文本 传输 协议 ) 作 为 通信 协议 ,通过 网 络 让 浏览 器 与 服务 器 进行 通信 的 计算 机 程序 。 
制作 动态 网 站 可 分 为 两 个 方面 : 一 是 网 站 界面 设计 ,主要 是 用 HTML、CSS 等 代码 及 图 
片 设计 网 页 的 界面 ;二 是 网 站 程序 设计 ,实现 管理 网 站 内 的 信息 、 与 用 户 进行 交互 等 功能 。 


6.1 动态 网 站 概述 


动态 网 站 是 一 种 基于 B/S 结构 的 网 络 程序 。 那 么 什么 是 B/S 结构 呢 ? 

B/S 是 Browser/Server 的 缩写 , 即 浏览 器 /服务 器 结构 。 它 是 随 着 Internet 技术 的 
兴起 ,对 C/S(Client/Server) 客 户 端 /服务 器 结构 的 一 种 变化 或 者 改进 。 在 这 种 结构 下 ， 
客户 端 软件 由 浏览 器 来 代替 ,一 部 分 事务 迎 辑 放 在 浏览 器 端 (Browser) 实 现 ,但 是 主要 事 
务 逻 辑 在 服务 器 端 (Server) 实 现 。 

动态 网 站 通常 由 HTML 文件 .服务 器 端 脚 本 文件 和 一 些 资源 文件 组 成 。 

(1) HTML 文件 提供 静态 的 网 页 内 容 。 

(2) 脚本 文件 提供 程序 ,实现 客户 端 与 服务 器 之 间 的 交互 以 及 访问 数据 库 或 文件 等 。 

(3) 资源 文件 提供 网 站 中 的 图 片 样式 表 及 配置 文件 等 资源 。 


6.1.1 动态 网 站 的 运行 环境 
动态 网 站 的 运行 ,需要 Web 服务 器 ,浏览 器 和 HTTP 通信 协议 3 个 要 素 的 支持 。 
1. Web 服务 器 


动态 网 站 的 运行 需要 一 个 载体 ,这 就 是 Web 服务 器 。 一 个 Web 服务 器 可 以 部 署 多 
个 网 站 (或 Web 应 用 程序 ) 。 

通常 Web 服务 器 有 两 层 含义 : 一 方面 它 代表 运 行 Web 应 用 程序 的 计算 机 硬件 设 
备 , 一 台 计 算 机 只 要 安装 了 操作 系统 和 Web 服务 器 软件 ,就 可 算 作 一 台 Web 服务 器 ; 另 
一 方面 Web 服务 器 专 指 一 种 软件 一 一 Web 服务 器 软件 ,该 软件 的 功能 是 响应 用 户 通过 
浏览 器 提交 的 HTTP 请 求 ,例如 用 户 请 求 的 是 PHP 脚本 , 则 Web 服务 器 软件 将 解析 并 
执行 PHP 脚本 ,生成 HTML 格式 的 文本 ,并 发 送 到 客户 端 ,显示 在 浏览 器 中 。 
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2. 浏览 器 


浏览 器 是 一 种 用 于 解析 和 执行 HTML 代码 (可 包括 CSS 代码 和 客户 端 JavaScript 
脚本 ) 的 应 用 程序 , 它 可 以 从 Web 服务 器 接收 、 解 析 和 显示 信息 资源 (可 以 是 网 页 或 图 像 
等 ) ,信息 资源 一 般 使 用 统一 资源 定位 符 (URL) 标 识 。 

浏览 器 只 能 解析 和 显示 HTML 文件 ,而 无 法 处 理 服务 器 端 脚本 文件 (如 PHP 文 
件 ) ,这 就 是 为 什么 直接 用 浏览 器 能 打开 HTML 网 页 文件 ,而 服务 器 端 脚 本 文件 只 有 被 
放置 在 Web 服务 器 上 才能 被 正常 浏览 的 原因 。 


3. HTTP 通信 协议 


HTTP 是 浏览 器 与 Web 服务 器 之 间 通 信 的 语言 。 浏 览 器 与 服务 器 之 间 的 会 话 ( 见 
图 6-1) 总 是 由 浏览 器 向 服务 器 发 送 HTTP 请 求 信 息 开 始 (如 用 户 输入 网 址 ,请 求 某 个 网 
页 文件 ), Web 服务 器 根据 请 求 返回 相应 的 信息 ,这 称 为 HTTP 响应 ,响应 中 包含 请 求 的 
完整 状态 信息 ,并 在 消息 体 中 包含 请 求 的 内 容 ( 如 用 户 请 求 的 网 页 文件 内 容 等 ) 。 


< @ HTTP 响 应 


浏览 器 Web 服 务 器 
图 6-1 浏览 器 与 服务 器 之 间 的 会 话 







Q@ HTTP 请 求 


6.1.2 动态 网 站 开发 语言 


动态 网 站 开发 语言 用 来 编写 动态 网 站 的 服务 器 端 程序 。 目 前 流行 的 动态 网 站 开发 语 
言 有 CGI.PHP、ASP、ASP.NET 和 JSP 等 。 下 面 分 别 来 介绍 。 


1. CGI 


最 早 能 够 动态 生成 HTML 页 面 的 技术 是 CGI(Common Gateway Interface, 通 用 网 
关 接 口 ), 由 美国 NCSA(National Center for Supercomputing Applications) 于 1993 年 提 
出 。CGI 技术 允许 服务 器 端 应 用 程序 根据 客户 端的 请 求 ,动态 生成 HTML 页 面 。 早 期 
的 CGI 大 多 是 编译 后 的 可 执行 程序 ,其 编程 语言 可 以 是 C、C++ 等 任何 通用 的 程序 设计 
语言 ,也 可 以 是 Perl、Python 等 脚本 语言 。 但 是 .CGI 程序 的 编写 比较 复杂 而 且 效率 低 ， 
并 且 每 次 修改 程序 后 都 必须 将 CGI 的 源 程序 重新 编译 成 可 执行 文件 。 因 此 目前 很 少 有 
人 使 用 CGI 技术。 

2。PHP 


1994 年 ,Rasmus Lerdorf 发 明了 专门 用 于 Web 服务 器 编程 的 PHP 工具 语言 ,与 以 
往 的 CGI 程序 不 同 ,PHP 语言 将 HTML 代码 和 PHP 指令 结合 成 为 完整 的 服务 器 端 动 
态 页 面 ,执行 效率 比 完 全 生成 HTML 标记 的 CGI 要 高 得 多 。PHP 的 其 他 优点 包括 : 路 
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平台 并 且 开 放 源 代码 ,支持 几乎 所 有 流行 的 数据 库 , 可 以 运行 在 UNIX、Linux 或 
Windows 操作 系统 下 。 开 发 PHP 时 通常 搭配 Apache Web 服务 器 和 MySQL 数据 库 。 





3. ASP 


1996 年 ,Microsoft 公司 推出 了 ASP 1.0。ASP 是 Active Server Pages 的 缩写 , 即 动 
态 服务 器 页 面 。 它 是 一 种 服务 器 端 脚本 编程 环境 ,可 以 混合 使 用 HTML、 服 务 器 端 脚 本 
语言 (VBScript 或 JavaScript) 以 及 服务 器 端 组 件 创建 动态 .交互 的 Web 应 用 程序 。 从 
Windows NT 4.0 开始 ,所 有 Windows 操作 系统 都 提供 了 IIS (Internet Information 
Services) 组 件 , 它 可 以 作为 ASP 的 Web 服务 器 软件 。 


4. JSP 


1997 一 1998 年 ,SUN 公司 相继 推出 了 Servlet 技术 和 JSP(Java Server Pages) 技 术 。 
这 两 者 的 组 合 ( 还 可 以 加 上 Javabean 技术 ) ,让 程序 员 可 以 使 用 Java 语言 开发 Web 应 用 
程序 。 

JSP 实际 上 是 将 Java 程序 片段 和 JSP 标记 嵌入 HTML 文档 中 , 当 客 户 端 访问 一 个 
JSP 网 页 时 ,将 执行 其 中 的 程序 片段 ,然后 返回 给 客户 端 标 准 的 HTML 文档。 与 ASP 不 
同 的 是 : 客户 端 每 次 访问 ASP 文件 时 ,服务 器 都 要 对 该 文件 解释 执行 一 遍 , 再 将 生成 的 
HTML 代码 发 送 给 客户 端 。 而 在 JSP 中 , 当 第 一 次 请 求 JSP 文件 时 ,该 文件 会 被 编译 成 
Servlet, 再 生成 HTML 文档 发 送 给 客户 端 , 当 以 后 再 次 访问 该 文件 时 ,如 果 文 件 没有 被 
修改 ,就 直接 执行 已 经 编译 生成 的 Servlet, 然 后 生成 HTML 文档 发 送 给 客户 端 ,由 于 以 
后 每 次 都 不 需要 重新 编译 ,因此 JSP 在 执行 效率 和 安全 性 方面 有 明显 优势 。JSP 的 另 一 
个 优点 是 可 以 跨 平台 ,缺点 是 运行 环境 及 Java 语言 都 比较 复杂 ,导致 学 习 难 度 大 。 


5. ASP. NET 


2002 年 ,Microsoft 公司 正式 发 布 了 .NET FrameWork 和 Visual Studio . NET, 它 引 
人 了 ASP. NET 这 种 全 新 的 Web 开发 技术 。ASP. NET 可 以 使 用 VB. NET、C# 等 编译 
型 语言 ,支持 Web 窗 体 、. NET Server Control 和 ADO. NET 等 高 级 特性 。ASP. NET 应 
用 程序 最 大 的 特点 是 程序 与 页 面 分 离 ,也 就 是 说 , 它 的 程序 代码 可 单独 写 在 一 个 文件 中 ， 
而 不 是 敌人 到 网 页 代码 中 。ASP. NET 需要 运行 在 安装 了 . Net FrameWork 的 IIS 服务 
六 下 

总 的 来 说 , PHP 和 ASP 属于 轻 量 集 的 Web 程序 开发 环境 ,只 要 安装 了 
Dreamweaver 就 可 进行 程序 的 编写 。 而 ASP. NET 和 JSP 属于 重量 级 的 开发 平台 ,除了 
安装 Dreamweaver 外 ,还 必须 安装 Visual Studio 或 Eclipse 等 大 型 开发 软件 。 


6.1.3 ”Web 服务 器 软件 


要 在 计算 机 上 运行 动态 网 站 或 网 页 ,必须 先 安装 Web 服务 器 软件 。Web 服务 器 软 
件 是 一 种 可 以 运行 和 管理 Web 应 用 程序 的 软件 。 对 于 不 同 的 Web 开发 技术 来 说 ,其 拱 
配 的 Web 服务 器 软件 是 不 同 的 。 表 6-1 列 出 了 几 种 Web 开发 语言 的 特点 及 其 运行 
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环境 。 
表 6-1 Web 开发 语言 的 特点 及 其 运行 环境 
PHP ASP ASP. NET JSP 
Web 服务 器 Apache IIS JIS Tomcat 
运行 方式 解释 执行 解释 执行 预 编译 预 编译 
跨 平台 性 任何 平台 Windows 平台 Windows 平台 任何 平台 
文件 扩展 名 . php .asp aspx .jsp 














Web 服务 器 的 功能 是 解析 HTTP 协议 , 当 Web 服务 器 接收 到 一 个 HTTP 请 求 后 ， 
会 返回 一 个 HTTP 响应 ,比如 返回 一 个 HTML 静态 页 面 给 浏览 器 .进行 页 面 跳 转 或 者 调 
用 其 他 程序 (如 CGI 脚本 、PHP 程序 等 ) ,产生 动态 响应 。 而 这 些 服务 器 端的 程序 通常 会 
产生 一 个 HTML 的 响应 来 让 浏览 器 可 以 浏览 。 选 择 Web 服务 器 时 ,应 考虑 以 下 因素 : 
性 能 、 安 全 性 ,日 志和 统计 、 虚 拟 主机 ,代理 服务 器 和 集成 应 用 程序 等 。 


6.2 网 页 的 类 型 和 工作 原理 


6.2.1 静态 网 页 和 动态 网 页 


根据 Web 服务 器 是 否 需要 对 网 页 中 脚本 代码 进行 解释 (或 编译 ) 执 行 ,网 页 可 分 为 静 
态 网 页 和 动态 网 页 。 

(1) 静态 网 页 ; 是 纯粹 的 HTML 页 面 ,网 页 的 内 容 是 固定 的 \ 不 变 的。 用 户 每 次 访 
问 静 态 网 页 时 ,其 显示 的 内 容 都 是 一 样 的 。 

(2) 动态 网 页 : 是 指 网 页 中 的 内 容 会 根据 用 户 请 求 的 不 同 而 发 生变 化 的 网 页 ,同一 
个 网 页 由 于 每 次 请 求 的 不 同 , 可 显示 不 同 的 内 容 , 如 图 6-2 中 显示 的 两 个 网 页 实际 上 是 同 
一 个 动态 网 页 文件 (product. php)。 动 态 网 页 中 可 以 变化 的 内 容 称 为 动态 内 容 , 它 是 由 
Web 应 用 程序 来 实现 的 。 

在 Internet 发 展 初期 ,Web 上 的 内 容 都 是 由 静态 网 页 组 成 ,Web 开发 就 是 编写 一 些 
简单 的 HTML 页 面 ,页 面 上 包含 一 些 文本 、 图 片 等 信息 资源 ,用 户 可 以 通过 超 链接 浏览 
信息 。 采 用 静态 网 页 的 网 站 有 很 明显 的 局 限 性 ,如 不 能 与 用 户 进行 交互 ,不 能 实时 更 新 网 
页 上 的 内 容 。 因 此 像 用 户 留言 .发 表 评 论 等 功能 都 无 法 实现 ,只 能 做 一 些 简 单 的 展示 型 
网 站 。 

后 来 Web 开始 由 静态 网 页 向 动态 网 页 转变 , 随 着 动态 网 页 的 出 现 ,用 户 能 与 网 页 进 
行 交互 ,具体 表现 在 除了 能 浏览 网 页 内 容 外 ,还 能 改变 网 页 内 容 ( 如 发 表 评 论 )。 此 时 用 户 
既是 网 站 内 容 的 消费 者 (浏览 者 ) ,又 是 网 站 内 容 的 制造 者 。 


1. 静态 网 页 和 动态 网 页 的 区 别 


在 URL 表现 形式 上 ,每 个 静态 网 页 都 有 一 个 固定 的 URL, 而 且 网 页 的 文件 名 以 
.htm、. html、. shtml 等 为 后 缀 , 且 不 含有 “?” 号 。 例 如 ,http://ec. hynu. cn/items/g1. 
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动态 网 页 可 根据 请 求 的 不 同 每 次 显示 不 同 的 内 容 


html。 而 动态 网 页 的 文件 名 以 . php、. asp、. aspx、. jsp、. cgi、. perl 为 后 级 ,文件 名 后 可 以 
“73” 号 ,例如 ,http://www. amazon. com/product. aspx?id 一 204。 

在 网 站 的 内 容 上 ,静态 网 页 内 容 发 布 到 网 站 服务 器 上 后 ,无 论 是 否 有 用 户 访问 ,每 个 
静态 网 页 文件 都 保存 在 网 站 服务 器 上 ,每 个 网 页 都 是 一 个 独立 的 文件 , 且 内 容 相 对 稳定 。 
在 网 站 维护 方面 ,静态 网 页 一 般 没有 数据 库 的 支持 ,因此 在 网 站 制作 和 维护 方面 工作 量 较 
大 , 当 网 站 信息 量 很 大 时 仅仅 依靠 静态 网 页 来 发 布 网 站 内 容 变 得 非常 困难 。 

提示 : 动态 网 页 绝 不 是 页 面 上 含有 动画 的 网 页 ,即使 在 静态 网 页 上 有 一 些 动画 (如 
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Flash 或 Gif 动画 ) 或 视频 ,但 我 们 每 次 访问 它 时 显示 的 内 容 是 一 样 的 ,因此 仍然 是 静态 
网 页 。 


2. 静态 网 页 的 工作 流程 


用 户 在 浏览 静态 网 页 时 ,Web 服务 器 找到 网 页 就 直接 把 网 页 文件 发 送 给 客户 端 , 服 
务 器 不 会 对 网 页 做 任何 处 理 , 如 图 6-3 所 示 。 静 态 网 页 在 每 次 浏览 时 ,内 容 都 不 会 发 生变 
化 ,网 页 一 经 编写 完成 ,其 显示 效果 就 确定 了 。 如 果 要 改变 静态 网 页 的 内 容 , 就 必须 修改 
网 页 的 源 代码 再 重新 上 传 到 服务 器 。 








Web 服 务 器 不 _ 
<html> | 做 任何 处 理 | <html> 浏览 器 对 HTML 进 行 解释 执行 









</html> </html> 


HTML 代 码 HTML 代 码 





Web 服 务 器 浏览 器 
图 6-3 静态 网 页 的 工作 流程 


3. 动态 网 页 的 优势 


静态 网 页 在 很 多 时 候 是 无 法 满足 Web 应 用 的 需要 的 。 举 个 例子 来 说 ,假设 有 个 电子 
商务 网 站 需要 展示 1 000 种 商品 ,其 中 每 个 页 面 显 示 一 种 商品 。 如 果 用 静态 网 页 来 做 的 
话 ,那么 需要 制作 1 000 个 静态 网 页 ,这 带 来 的 工作 量 是 非常 大 的 。 而 且 如 果 以 后 要 修改 
这 些 网 页 的 外 观 风格 ,就 需要 一 个 一 个 网 页 地 修改 ,工作 量 也 很 大 。 

而 如 果 使 用 动态 网 页 来 做 ,只 需要 制作 一 个 页 面 ,然后 把 1 000 种 商品 的 信息 存储 在 
数据 库 中 ,页 面 根据 浏览 者 的 请 求 调用 数据 库 中 的 数据 , 即 可 用 同一 个 网 页 显示 不 同 商品 
的 信息 。 要 修改 网 页 外 观 时 ,也 只 需 修改 这 一 个 动态 页 的 外 观 即 可 ,工作 量 显著 减少 。 

由 此 可 见 , 动 态 网 页 是 页 面 中 内 容 会 根据 具体 情况 发 生变 化 的 网 页 ,同一 个 网 页 根据 
每 次 请 求 的 不 同 , 每 次 可 显示 不 同 的 内 容 。 例 如 一 个 新 闻 网 站 中 , 单 击 不 同 的 链接 可 能 都 
是 链接 到 同一 个 动态 网 页 ,但 是 该 网 页 每 次 能 显示 不 同 的 新 闻 。 

动态 网 页 技术 还 能 实现 诸如 用 户 登 录 ,博客 .论坛 等 各 种 交互 功能 。 动 态 网 页 要 显示 
不 同 的 内 容 , 需 要 数据 库 作 为 支持 。 从 网 页 的 源 代码 看 ,动态 网 页 中 含有 服务 器 端 代码 ， 
需要 先 由 Web 服务 器 对 这 些 代码 进行 解释 执行 ,生成 HTML 代码 后 才能 发 送 给 客户 端 。 


6.2.2 PHP 动态 网 页 的 工作 原理 


PHP 即 Hypertext Preprocessor( 超 文本 预 处 理 器 ) 的 递归 缩写 ,是 一 种 服务 器 端的 ， 
器 平台 的 、 开 放 源 代码 的 多 用 途 脚本 语言 ,尤其 适用 于 Web 应 用 程序 开发 ,并 可 以 嵌入 到 
HTML 中 去 。 它 最 早 由 Rasmus Lerdorf 于 1994 年 发 明 ,而 现在 PHP 的 标准 是 由 PHP 
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Group 和 开放 源 代码 社区 维护 。 
PHP 的 特点 在 于 跨 平台 ,提供 的 函数 非常 丰富 ,支持 广泛 的 数据 库 , 执 行 速度 快 , 模 
板 化 ,能 实现 代码 和 页 面 分 离 。 目 前 PHP 的 版 本 为 PHP 5. 1( 本 书 介绍 这 种 版 本 ) 。 
PHP 主要 用 来 编写 动态 网 页 ,一 个 完整 的 动态 网 页 代码 可 以 包含 在 服务 器 端 运 行 的 
程序 代码 和 在 浏览 器 端 运行 的 HTML 代码 。 以 PHP 创建 的 动态 网 页 为 例 , 它 的 执行 过 
程 如 图 6-4 所 示 。 


Web 服 务 器 对 
PHP 程 序 代码 
进行 解释 执行 <html> 


</html> 






浏览 器 对 HTML 代 码 进行 
执行 








</html> 


PHP 代 码 HTML 代 码 





Web 服 务 器 浏览 器 
图 6-4 PHP 动态 网 页 的 执行 过 程 


可 以 看 出 ,PHP 程序 经 过 Web 服务 器 时 ,Web 服务 器 会 对 它 进 行 解释 执行 ,生成 纯 
客户 端的 HTML 代码 再 发 送 给 浏览 器 。 因 此 ,保存 在 服务 器 网 站 目录 中 的 PHP 文件 和 
浏览 器 接收 到 的 PHP 文件 的 内 容 一 般 是 不 同 的 ,因此 无 法 通过 在 浏览 器 中 查看 源 代码 
的 方式 获取 PHP 程序 的 代码 。 

图 6-4 中 的 Web 服务 器 主要 是 指 一 种 软件 , 它 具 有 解释 执行 PHP 代码 的 功能 ,PHP 
的 Web 服务 器 软件 一 般 是 Apache。 因 此 ,要 运行 PHP 程序 ,必须 先 安装 Apache, 这 样 
才能 对 PHP 程序 进行 解释 执行 。 安 装 了 Apache 的 计算 机 就 成 了 一 台 Web 服务 器 。 

对 比 一 下 静态 网 页 , Web 服务 器 不 会 对 它 进行 任何 处 理 , 直 接 找到 客户 端 请 求 的 
HTML 文件 ,发 送 给 浏览 器 ,其 运行 过 程 如 图 6-3 所 示 。 
因此 , Web 服务 器 的 作用 是 : 当 浏览 器 发 送 请 求 时 ,对 于 静态 网 页 ,Web 服务 器 仅仅 
是 在 网 站 目录 中 ,找到 静态 网 页 文件 后 就 直接 发 送 给 浏览 器 ;而 对 于 动态 网 页 , Web 服务 
器 找到 动态 网 页 后 要 先 对 网 页 中 的 服务 器 端 代码 (如 PHP) 进 行 解释 执行 ,生成 纯粹 的 
HTML 代码 后 再 发 送 给 浏览 器 。 

提示 : PHP 文件 不 能 通过 双击 文件 图 标 直 接 用 浏览 器 打开 ,因为 这 样 PHP 代码 没 
有 经 过 Web 服务 器 的 处 理 。 运 行 PHP 文件 的 具体 方法 将 在 6. 3.2 节 介 绍 。 


6.3 ”配置 PHP 的 运行 环境 


由 于 PHP 程序 需要 在 Web 服务 器 上 运行 ,因此 计算 机 如 果 要 能 运行 PHP 程序 , 必 
须 在 该 机 上 安装 PHP 的 Web 服务 器 软件 一 一 Apache。Apache 有 Windows、Linux 等 各 
种 操作 系统 的 版 本 ,这 使 得 PHP 能 运行 于 不 同 的 操作 系统 平台 上 。 

对 于 PHP 学 习 者 来 说 ,建议 采用 Windows 十 Apache 2. 2 十 PHP 5.1 十 MySQL 5 作 
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为 PHP 的 运行 环境 ,下 面 介 绍 PHP 的 集成 环境 AppServ 的 安装 。 


6.3.1 AppServ 的 安装 


Apache 其 实 只 是 一 种 通用 的 Web 服务 器 , 它 本 身 并 不 能 对 PHP 脚本 进行 解释 执 
行 。 为 了 使 Apache 能 解释 执行 PHP, 还 须 在 Apache 上 安装 PHP 的 解析 器 : PHP 5. 1。 
此 外 ,由 于 开发 动态 网 站 通常 都 需要 访问 数据 库 , 而 MySQL 是 一 种 很 适合 与 PHP 搭配 
使 用 的 数据 库 , 因 此 ,通常 还 需要 安装 MySQL 5。 但 是 MySQL 是 一 种 没有 图 形 操作 界 
面 的 数据 库 管理 软件 ,对 数据 库 的 任何 操作 都 只 能 在 命令 行 下 输入 命令 来 完成 ,这 很 不 友 
好 ,为 了 使 MySQL 能 像 Access 那样 支持 图 形 界面 化 操作 ,又 需要 安装 MySQL 的 图 形 
界面 操作 程序 一 phpMyAdmin。 

因此 ,配置 PHP 的 运行 环境 一 般 需 要 安装 以 上 4 种 软件 。 如 果 分 别 安装 ,不 仅 安装 
过 程 很 麻烦 ,而且 安装 完 之 后 还 要 进行 大 量 的 设置 ,才能 使 这 几 种 软件 工作 在 一 起 。 

为 此 ,泰国 的 PHP 爱好 者 制作 了 AppServ,AppServ 实际 上 是 这 4 种 软件 的 集成 安 
装 包 , 包 含有 Apache、PHP、MySQL、phpMyAdmin。 只 要 安装 AppServ, 就 可 一 次 性 地 
把 PHP 的 运行 环境 全 都 安装 和 配置 好 ,大 大 简化 了 PHP 运行 环境 的 安装 和 配置 。 


1， AppServ 的 安装 过 程 


AppServ 是 一 个 免费 软件 ,可 以 在 百度 上 搜索 并 下 载 AppServ,AppServ 的 安装 文件 
只 有 一 个 , 即 appserv-win32-2. 5. 9. exe, 双 击 该 文件 ,就 会 弹出 安装 向 导 界 面 , 单 击 Next 
按钮 ,会 出 现 软件 许可 协议 界面 , 单 击 I Agree 按钮 ,将 提示 选择 软件 的 安装 位 置 ( 见 图 6-5)， 
在 这 一 步 的 文本 框 中 可 直接 输入 安装 路 径 , 建 议 安装 在 非 系统 盘 , 如 D:\AppServ, 并 且 
安装 路 径 中 不 能 含有 中 文字 符 , 和 否则 会 导致 错误 。 








局 jz| 


Choose Install Location 
Choose the folder in which to install AppSery 2.5.9, 





图 6-5 选择 安装 位 置 


单 击 Next 按钮 ,选择 需要 安装 的 组 件 ( 见 图 6-6) ,因为 需要 安装 AppServ 包含 的 4 
种 软件 ,所 以 ,必须 把 4 个 复 选 框 全 部 选中 。 

在 下 一 步 中 ,需要 配置 Apache 服务 器 的 有 关 信 息 ( 见 图 6-7) ,包括 服务 器 名 管理 员 
邮箱 和 HTTP 端口 号 。 其 中 Server Name 可 设置 为 该 服务 器 的 域名 ,由 于 我 们 只 是 将 
Apache 安装 在 本 机 上 作为 测试 ,因此 可 以 任意 输入 一 个 名 称 。 如 果 是 将 这 台 机 器 作为 网 
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Select Components 
Select the components you want to install clear the components 
you do not want to instal， 


可 可 可 可 





Apache HTTP Server Information 
Please enter your servers information, 








6-7 Apache 服务 器 信息 的 配置 


络 上 真正 的 Web 服务 器 , 则 应 该 输入 一 个 真实 的 域名 ,以 便 网 络 上 的 其 他 主机 都 能 通过 
域名 访问 它 。 

在 Administrator's Email Address 文本 框 中 , 如果 填 入 一 个 Email 地 址 ,那么 当 
Apache 软件 运行 出 现 错误 时 会 把 错误 信息 发 送 到 这 个 邮箱 ,因此 填 不 填 都 没关系 。 

在 Apache HTTP Port 文本 框 中 ,可 以 设置 Apache 服务 器 HTTP 服务 端口 号 ,建议 
使 用 HTTP 服务 默认 的 80 端口 ,如果 填 其 他 端口 (如 88) ,访问 时 就 必须 在 域名 后 加 上 端 
口号 ,如 http://localhost:88。 

提示 : 如 果 本 机 上 还 安装 了 IIS 或 Tomcat 等 其 他 Web 服务 器 , 则 应 该 修改 这 些 服 
务 器 的 HTTP 端口 为 非 80 端口 ,否则 ,会 因为 端口 冲突 ,导致 Apache 服务 器 无 法 启动 。 

在 下 一 步 中 ,需要 配置 MySQL 数据 库 的 相关 信息 ( 见 图 6-8) ,包括 超级 用 户 root 的 
密码 .MySQL 数据 库 中 字符 的 编码 方式 等 ,本 书 中 设置 MySQL 的 root 用 户 密码 为 111， 
对 于 字符 编码 方式 ,建议 选择 默认 的 UTF-8 Unicode, 因 为 UTF-8 编码 是 世界 范围 通用 
的 编码 方式 , 它 可 以 保证 在 英文 IE 浏览 器 中 也 能 正常 显示 中 文 。 然 后 ,把 下 面 的 Old 
Password Support 和 Enable InnoDB 两 个 复 选 框 都 选中 ,否则 可 能 会 导致 MySQL 服务 
器 无 法 启动 。 
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Configure the My5QL Server instance, 











6-8 配置 MySQL 数据 库 服务 器 


最 后 单 击 Install 按钮 ,就 会 开始 安装 AppServ 了 。 安 装 完成 后 ,默认 会 自动 启动 
Apache 服务 器 和 MySQL 数据 库 ,如 果 计 算 机 中 安装 有 360 安全 卫士 或 金山 卫士 等 杀毒 
软件 ,可 能 会 提示 这 些 程序 正在 加 入 系统 服务 ,这 时 应 该 选择 “允许 ”修改 。 


2. 测试 AppServ 是 否 安 装 成 功 


在 IE 浏览 器 中 输入 http://localhost, 如 果 能 看 到 如 图 6-9 所 示 的 网 页 , 则 表明 
AppServ 安装 基本 成 功 了 。 


tf 
The AppServ Open Project - 2.5.9 for Windows 


咀 phpMyAdmin Database Manager Version 210.2———> PhpMyAdmin 
区 PHP Information Version 5.2.3 软件 的 链接 


About AppServ Version 2.5.9 for Windows 
AppServis a merging open source software installer package for Windows includes : 


。 Apache Web ServerVersion 2.2.4 

。 PHP ScriptLanguage Version 5.2.3 

。 MySQL Database Version 5.0.45 

。 phpMyAdmin Database Manager Version 2.10.2 








图 6-9 AppServ 的 测试 页 


AppServ 安装 完成 后 ,在 AppServ 安装 目录 下 ,应 该 包含 4 个 子 目录 ,如 图 6-10 所 
示 。 其 中 Apache2. 2 是 Apache 服务 器 软件 的 安装 目录 ,MySQL 是 MySQL 数据 库 软件 
的 目录 ,php5 是 PHP 解释 器 的 目录 ,而 www 是 网 站 主 目录 ,双击 www 目录 ,将 进入 如 
图 6-11 所 示 的 目录 。 

其 中 ,index. php 文件 是 网 站 的 主页 ,我 们 输入 http://localhost 打开 的 如 图 6-9 所 示 
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@ 拘 泪 个 文件 天 发 到 
| 
共享 此 文件 来 
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ry W200 A Phpinfo, php 
MySQL 数 据 库 管理 软件 主页 


图 6-11 www 目录 下 的 子 目 录 








侠 将 这 人 文人 发 布 到 
局 共享 此 文件 夹 























AppServ 测试 页 就 是 该 文件 的 运行 结果 。 可 见 , 如 果 要 替换 Apache 默认 网 站 的 主页 ,只 
要 替换 该 文件 即 可 。 而 phpMyAdmin 目录 是 phpMyAdmin 软件 的 所 在 目录 。 该 软件 是 
个 B/S 架构 的 软件 。 如 果 要 访问 phpMyAdmin, 只 要 在 图 6-9 中 单 击 phpMyAdmin 
Database Manager Version 2. 10. 2 链接 ,或 直接 输入 网 址 http://localhost/phpMyAdmin， 
就 会 弹出 用 户 登录 框 。 

在 其 中 输入 正确 的 用 户 名 和 密码 (这 里 用 户 名 是 root, 密码 是 111), 就 会 进入 
phpMyAdmin 的 界面 。 在 这 里 可 以 用 图 形 方式 创建 和 管理 数据 库 及 表 。phpMyAdmin 
的 具体 使 用 方法 将 在 10. 1. 2 节 介 绍 。 


6.3.2 运行 第 一 个 PHP 程序 
1. 新 建 第 一 个 PHP 程序 


PHP 文件 和 HTML 文件 一 样 ,也 是 一 种 纯 文本 文件 ,因此 可 以 用 记事 本 来 编辑 ,只 
要 保存 成 后 缀 名 为 . php 的 文件 就 可 以 了 。 我 们 在 “记事 本 ”中 输入 如 图 6-12 中 所 示 的 代 
码 (注意 代码 区 分 大 小 写 ) 。 


无 二 是 - 记事 本 TE 





<h1><? echo "今天 是 ' .date("Y 年 nm 月 I 日 ") ?></h1> 





图 6-12 在 “记事 本 ”中 新 建 一 个 PHP 文 件 
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输入 完成 后 ,在 “记事 本 ”中 选择 “文件 ”一 保存 菜单 命令 ,就 会 弹出 如 图 6-13 所 示 
的 “另存 为 ”对 话 框 ,这 时 首先 应 在 “保存 类 型 "中 选择 “所 有 文件 ”, 再 在 文件 名 中 输入 
6-1. php, 并 选择 保存 在 “D:\AppServ\www” 目 录 下 , 单 击 “ 保 存 ” 按 钮 即 新 建 了 一 个 PHP 
文件 6-1， php。 





另存 为 21x| 
保存 在 0): [ 口 ww 可 OY 


D:\AppServiwww 
cei-bi 
php 
加 wapinfe php 文件 后 组 名 为 .php 
: wa | 





AREST S| 


图 6-13 “另存 为 ”对话 框 


2. 运行 PHP 文件 


PHP 文件 只 有 通过 Web 服务 器 才能 运行 ,因此 刚才 将 6-1. php 保存 在 了 Apache 默 
认 网 站 的 主 目录 “D:\AppServ\www” 下 。 要 运行 Apache 默认 网 站 主 目录 下 的 文件 ,可 
以 在 浏览 器 地 址 栏 中 输入 如 下 URL 访问 该 文件 。 


http://localhost/6- 1.php 


说 明 : 

(1) http://localhost 相当 于 本 机 的 域名 。 我 们 知道 , 当 在 地 址 栏 中 输入 某 个 网 站 的 
域名 后 ,Web 服务 器 就 会 自动 到 该 网 站 对 应 的 主 目录 中 去 找 相 应 的 文件 。 也 就 是 说 , 域 
名 和 网 站 主 目录 是 一 种 一 一 对 应 的 关系 ,因此 Web 服务 器 (这 里 是 Apache) 会 到 本 机 默 
认 网 站 的 主 目录 (D:\AppServ\www) 中 去 找 文件 6-1. php。 

提示 : 可 以 通过 “http://localhost/ 文 件 名 ”直接 访问 Apache 网 站 根 目 录 下 的 文件 。 
如 果 根 目录 下 有 子 目 录 的 话 ,要 访问 子 目 录 下 的 文件 用 “http://localhost/ 子 目录 名 / 文 
件 名 ” 即 可 。 例 如 ,假设 要 访问 D:\AppServ\www\temp 下 的 test. php 文件 , 则 在 地 址 栏 
中 输入 “http://localhost/temp/test. php” 即 可 。 

(2) 关于 服务 器 地 址 : 除了 使 用 localhost 访问 本 机 外 ,还 可 使 用 127. 0. 0. 1( 本 机 IP 
地 址 ) 访 问 ,这 两 种 方式 用 来 在 本 机 上 运行 PHP 文件 。 第 三 种 方式 是 使 用 本 机 的 计算 机 
名 访问 ,这 种 方式 适合 在 局 域 网 内 使 用 ;另外 两 种 方式 是 使 用 本 机 在 Internet 上 的 域名 或 
IP 地 址 访问 ,这 要 求 本 机 具有 公 网 上 固定 的 IP 地 址 或 域名 ,也 就 是 把 本 机 作为 网 络 上 一 
台 真 正 的 Web 服务 器 , 供 Internet 上 其 他 用 户 访问 该 机 上 的 PHP 文件 。 

为 了 简便 ,本 书 都 采用 第 一 种 方式 访问 。 打 开 浏 览 器 ,在 地 址 栏 中 输入 http:// 
localhost/6-1. php, 按 回 车 键 ,就 会 出 现 如 图 6-14 所 示 的 运行 结果 (网 页 显示 的 是 服务 器 
端的 当前 日 期 ) 。 

在 图 6-14 中 右 击 ,选择 “查看 源 文件 ”命令 ,就 会 出 现 如 图 6-15 所 示 的 源 文件 ,与 
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图 6-12 中 的 PHP 源 程 序 比 较 , 可 发 现 PHP 代码 已 经 转化 成 纯 HTML 代码 了 ,这 验证 了 
Web 服务 器 确实 先 执行 了 PHP 源 程 序 ,再 将 生成 的 HTML 代码 发 送 给 浏览 器 。 


文件 有 编辑 于) 格式 @) 查看 WV) 帮助 QH) 





今天 是 2013 年 03 月 17 日 让 


-| 


<h1> 今 天 是 2813 年 83 月 17 日 Ch1> 轩 





图 6-14 程序 6-1. php 的 运行 结果 图 6-15 在 浏览 器 端 查看 源 文 件 


3. 运行 PHP 程序 的 步骤 总 结 


PHP 程序 需要 先 经 过 Web 服务 器 (Apache) 的 解释 执行 ,生成 的 静态 代码 才能 在 浏 
览 器 中 运行 。 为 了 让 Apache 解释 执行 PHP 文件 ,需要 经 过 如 图 6-16 所 示 的 两 步 ， 


文件 四 ”编辑 外 ”查看 WW 收 总 ”| 司 
Om-O- TPm 
WE Wppserv we -| Be 
图 名 

1! 三  [ 第 (1) 步 :把 php 文 件 放 
[i 壬 Apache 网 站 目录 下 所 | 


图 6-16 运行 PHP 程序 的 步骤 


E TUT DIS 
文件 四 编辑 包 ) 查看 WW) ”收藏 4 ”| 辟 


http://localhost/6-1. php 


今天 是 2013 年 03 月 17 日 










第 (2) 步 :输入 "httpJllocalhost/ 文 件 名 ” 
请 求 Apache 执 行 该 文件 








(1) 把 PHP 文件 放置 或 保存 到 Apache 的 网 站 目录 (或 子 目录 ) 下 ,这 样 Apache 才 
能 找到 这 个 PHP 文件; 

(2) 在 浏览 器 中 输入 "http ://localhost/ 文 件 名 ”, 这 就 相当 于 向 Apache 服务 器 发 送 
了 一 个 HTTP 请 求 , 请 求 Apache 执行 URL 地 址 中 的 文件 ,这 样 Apache 才 会 对 这 个 
PHP 文件 进行 解释 执行 。 
6.3.3 ”Apache 的 配置 


Apache 没有 图 形 化 的 服务 器 配置 界面 ,只 能 通过 修改 配置 文件 Chttpd. conf) 来 配置 
服务 器 。 该 文件 位 于 D:\AppServ\Apache2. 2\conf 目录 下 ,对 Apache 服务 器 的 任何 设 
置 (如 设置 主 目录 、 修 改 首页 ) 都 是 通过 修改 该 文件 的 代码 来 实现 的 。 

httpd. conf 是 一 个 纯 文本 文件 ,可 以 用 记事 本 或 Dreamweaver 等 软件 打开 。 也 可 以 
在 “开始 ”菜单 中 ,选择 “程序 ”一 AppServ 一 Configuration Server 一 Apache Edit the 
httpd. conf Configuration File 命令 打开 它 。 


1. 主 目录 的 设置 


Apache 的 网 站 主 目 录 默 认 是 D:\AppServ\www, 这 使 得 我 们 要 运行 PHP 文件 ,都 
必须 将 它 保存 在 这 个 目录 下 ,这 有 些 不 方便 。 实际 上 ,可 以 设置 Apache 的 主 目录 为 其 他 
目录 ,方法 如 下 : 
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要 修改 Apache 的 主 目录 ,必须 同时 修改 httpd. conf 文件 中 的 两 个 地 方 。 例 如 ,将 
Apache 的 主 目录 由 D:\AppServ\www 修改 为 E:\Web, 则 应 该 先 在 下 盘 新 建文 件 夹 
Web, 然 后 找到 httpd. conf 文件 的 第 240 行 。 进 行 如 下 修改 : 


DocumentRoot " D:/AppServ/www" > DocumentRoot "E:/Web" 


注意 : 要 将 目录 中 的 反 斜 杠 改 为 斜 杠 , 并 且 目 录 中 不 能 含有 任何 中 文字 符 。 
再 找到 httpd. conf 文件 的 第 268 行 。 进 行 如 下 修改 : 











<Directory "D:/AppServ/www"> <Directory "E:/Web"> 


保存 文件 ,重新 启动 Apache 服务 器 ,就 会 将 主 目 录 设 置 成 E:\Web。 设 置 完毕 后 ,可 
以 将 文件 6-1. php 从 D:\AppServ\www 目录 移动 到 E:\Web 目录 中 ,输入 http:// 
localhost/6-1. php 仍然 可 以 访问 该 文件 ,因为 http://localhost 对 应 E:\Web 目录 了 。 

提示 : 

(1) 对 httpd. conf 文件 进行 修改 后 ,都 必须 重新 启动 Apache 才能 使 设置 生效 。 重 启 
的 方法 是 : 在 “开始 ”菜单 中 ,选择 “程序 ”一 AppServ 一 Control Server by Service 一 
Apache Restart 命令 ; 或 者 在 “运行 "对 话 框 中 输入 : httpd-k restart。 

(2) httpd. conf 文件 中 有 很 多 行 以 “ 井 ” 开 头 , 井 ” 其 实 是 注释 符 , 表 示 这 些 行 都 是 
注释 。 

(3) 整个 httpd. conf 文件 中 都 不 能 出 现 中 文 或 全 角 字 符 , 否 则 Apache 服务 器 将 无 法 
运行 。 


2. 默认 文档 的 设置 


所 谓 默 认 文档 ,就 是 指 网 站 的 主页 (首页 ), 它 的 作用 是 这 样 的 ,如 果 在 浏览 器 中 只 输 
入 http://localhost 或 “http://localhost/ 子 目录 名 ”, 并 没有 输入 具体 某 个 网 页 文件 的 名 
称 , 则 Apache 就 会 自动 按 默认 文档 的 顺序 在 相应 的 文件 夹 里 查找 ,找到 后 就 显示 。 在 
httpd. conf 文件 的 第 303 行 中 ,有 对 默认 文档 的 设置 。 

# 

< IfMpdule dir module> 

</IfMdule> 

可 见 , 在 这 个 设置 下 ,如 果 不 输入 具体 的 网 页 文件 名 , 则 Apache 首先 会 在 目录 下 寻 
找 index. php 文件 ,如 果 找 不 到 ,就 会 再 去 找 index. html 和 index. htm。 

默认 文档 建议 保持 默认 的 index. php 即 可 ,因此 此 处 不 用 修改 。 


3. 虚拟 目录 的 建立 和 访问 


如 果 要 在 一 台 计 算 机 的 Apache 上 部 署 (deploy, 即 建立 和 运行 ) 多 个 网 站 ,比如 在 网 
上 下 载 了 很 多 个 PHP 网 站 的 源 代码 想 在 本 机 上 能 同时 运行 。 虽然 可 以 在 网 站 主 目 录 
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E:\Web 下 建立 多 个 文件 夹 ,每 个 文件 夹 下 分 别 放置 一 个 网 站 的 文件 。 但 这 样 就 要 把 每 
个 网 站 的 文件 都 移动 到 网 站 主 目录 下 的 对 应 目录 中 ,有 些 麻烦 。 

更 重要 的 是 ,由 于 这 些 网 站 都 放置 在 网 站 主 目录 下 (这 就 相当 于 是 同一 个 网 站 ) ,如 果 
多 个 网 站 的 程序 中 都 有 修改 网 站 公共 变量 (如 同名 的 Session 变量 ) 的 代码 , 则 可 能 会 发 
生 这 个 网 站 修改 了 其 他 网 站 公共 变量 的 情况 ,从 而 导致 出 现 意 想 不 到 的 问题 。 

设置 虚拟 目录 就 是 为 了 解决 上 述 问题 的 ,如 果 要 部 署 多 个 网 站 ,可 以 将 一 个 网 站 的 目 
录 设 置 为 Apache 的 主 目录 ,将 其 他 每 个 网 站 的 目录 都 设置 为 虚拟 目录 。 这 样 , 这 些 网 站 
都 真正 独立 了 ,每 个 网 站 相当 于 一 个 独立 的 应 用 程序 (Application) ,它们 可 以 拥有 自己 的 
一 套 公 共 变 量 。 设 置 虚拟 目录 的 方法 如 下 : 

例如 ,要 新 建 一 个 虚拟 目录 eshop ,指向 E:\eshop 目录 , 则 首先 新 建 E:\eshop 目录 ， 
然后 找到 httpd. conf 文件 的 第 360 行 。 在 二 IfModule alias_module 过 后 添加 一 段 : 





Alias "/eshop" "E:\ eshop" 

< Directory 'E:\eshop"> 

Options- Indexes FollowSymLinks 

AllowOverrigde None 

order allow,Geny 

Allow frcm all 

< /Directory> 

其 中 ,添加 的 第 一 行 表 示 建 立 了 一 个 虚拟 目录 eshop, 指 向 EE:\eshop 目录 。 而 后 面 
一 段 表示 为 目录 E:Neshop 设置 访问 权限 。 因 为 在 Apache 中 ,新 建 的 虚拟 目录 默认 是 没 
有 任何 访问 权限 的 。 重 启 Apache 后 ,虚拟 目录 eshop 就 建立 好 了 。 

提示 : Apache 的 网 站 主 目录 默认 是 允许 目录 浏览 的 , 即 如 果 该 目录 或 其 子 目录 下 找 
不 到 首页 文件 ,而 访问 者 又 只 输入 了 域名 或 目录 名 , 则 浏览 器 会 显示 该 目录 下 的 所 有 文件 
和 目录 列表 ,这 是 很 不 安全 的 ,在 httpd. conf 文件 的 第 281 行 ， Options Indexes 
FollowSymLinks, 其 中 Indexs 就 是 表示 目录 浏览 权限 ,要 去 掉 该 权限 ,可 在 它 前 面 加 个 
减 号 “一 ”, 或 将 其 删除 ,如 改 成 Options 一 Indexes FollowSymLinks 即 可 。 

要 运行 虚拟 目录 下 的 文件 ,可 以 使 用 “http://localhost/ 虚 拟 目 录 名 /路 径 名 /文件 
名 ”的 方式 访问 。 比 如 ,在 E:\eshop( 对 应 虚拟 目录 eshop) 下 有 一 个 index. php 的 文件 ， 
要 运行 该 文件 ,只 需 在 地 址 栏 中 输入 : http://localhost/eshop/index. php 或 http:// 
localhost/eshop。 而 要 运行 E:N\eshop\admin 目 http://localhost/eshop/admin/index.php 
录 下 的 index. php 文件 ,只 需 在 地 址 栏 输入 : 
http://localhost/eshop/admin/index. php， 该 本 机 域名 虚拟 目录 名 ”路径 和 文件 名 
URL 的 含义 如 图 6-17 所 示 。 图 6-17 访问 虚拟 目录 下 文件 的 URL 

由 此 可 见 , 访 问 虚拟 目录 下 文件 的 URL 分 
为 三 部 分 ,依次 是 本 机 域名 、 虚 拟 目 录 名 和 文件 相对 于 虚拟 目录 的 相对 路 径 和 文件 名 。 从 
访问 的 URL 形式 上 来 看 ,虚拟 目录 就 好 像 是 网 站 主 目录 下 的 一 个 子 目录 。 
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4. 默认 端口 的 修改 


如 果 要 修改 Apache 服务 器 的 默认 HTTP 端口 ,比如 将 80 修改 为 88, 只 要 找到 
httpd. conf 文件 的 第 67 行 。 将 “Listen 80? 改 为 "Listen 88” 即 可 ,以 后 访问 网 站 主 目 录 就 
必须 使 用 “域名 :端口 "的 形式 (如 http://localhost:88) 了 。 


6.4 ”使 用 Dreamweaver 开发 PHP 程序 


Dreamweaver 对 开发 PHP 程序 有 很 好 的 支持 ,包括 代码 提示 、 自 动 插入 PHP 代码 
等 ，Dreamweaver 开发 PHP 程序 的 最 大 优势 在 于 ,使 开发 人 员 能 在 同一 个 软件 环境 中 制 
作 静 态 网 页 和 动态 程序 。 


6.4.1 新 建 动态 站 点 


开发 PHP 程序 之 前 要 先 安装 和 配置 好 PHP 的 运行 环境 (Apache), 然 后 就 可 在 
Dreamweaver 中 新 建 动态 站 点 ,新 建 动态 站 点 的 作用 是 : 

(1) 使 站 点 内 的 文件 能 够 以 相对 URL 的 方式 进行 链接 ; 

(2) 在 预览 动态 网 页 时 ,能 够 使 用 设置 好 的 URL 运行 该 动态 网 页 。 具体 过 程 如 下 ，: 

在 Dreamweaver 中 执行 “站 点 ”>“ 新 建站 点 "菜单 命令 ,将 弹出 如 图 6-18 所 示 的 新 建 
站 点 对 话 框 ,其 中 站 点 名 字 可 任 取 一 个 ,但 是 访问 该 网 站 的 URL 一 定 要 设置 正确 。 如 果 
该 网 站 所 在 的 目录 是 Apache 的 网 站 主 目 录 , 则 应 该 用 http://localhost 方式 访问 ,如 果 
该 网 站 所 在 的 目录 是 Apache 的 虚拟 目录 , 则 应 该 用 “http://localhost/ 虚 拟 目 录 名 ”的 方 
式 访问 ,在 这 里 我 们 已 经 把 该 网 站 的 目录 (E:\Web) 设 置 成 了 Apache 的 主 目录 ,因此 在 
“您 的 站 点 的 HTTP 地 址 (URL) 是 什么 ?” 下 输入 “http://localhost/”。 








rer === > 
可 


图 6-18 新 建 动态 站 点 第 一 步 ( 访 问 网 站 的 URL) 


单 击 “ 下 一 步 ” 按 钮 ,将 出 现 如 图 6-19 所 示 的 对 话 框 ,在 “您 是 否 打算 使 用 服务 器 技 
术 ……” 选 项 组 中 ,选择 “是 …… ”按钮 ,在 “ 哪 种 服务 器 技术 ”下 拉 列 表 框 中 ,选择 PHP 
MySQL 选项 。 
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PHP 的 站 点 定义 为 





图 6-19 新 建 动态 站 点 第 二 步 (选择 服务 器 技术 ) 


单 击 * 下 一 步 ?按钮 ,在 如 图 6-20 所 示 的 对 话 框 中 先 选择 “在 本 地 进行 编辑 和 测试 " 单 
选 按 钮 。“ 您 将 把 文件 存储 在 计算 机 上 什么 位 置 ?” 就 是 问 你 的 网 站 的 主 目 录 在 哪儿 ,因此 
必须 选择 网 站 的 主 目 录 。 需 要 注意 的 是 ,该 网 站 的 主 目录 必须 和 Apache 的 主 目录 一 致 ， 
因为 Dreamweaver 预览 文件 时 是 打开 浏览 器 并 在 文件 路 径 前 加 http://localhost, 这 样 
实际 上 是 定位 到 了 Apache 的 主 目录 ,而 不 是 这 里 设置 的 主 目录 。 如 果 不 一 致 ,预览 时 就 
会 出 现 * 找 不 到 文件 ”的 错误 。 





编辑 文件 ， 第 3 部 分 
# DocunentRoot: The directory 
# documents. By default, all J 
人 # symbolic links and aliases 项 
杂 


图 6-20 ”新建 动 态 站 点 的 第 三 步 (设置 站 点 主 目录 ) 


单 击 “ 下 一 步 ” 按 钮 ,在 图 6-21 所 示 的 对 话 框 中 ,对 于 “您 应 该 使 用 什么 URL 来 浏览 
站 点 的 根 目录 ?” 的 问题 ,由 于 站 点 根 目 录 是 Apache 的 主 目录 ,因此 此 处 仍 选 择 http:// 
localhost/ 来 浏览 根 目录 。 

提示 : 如 果 在 上 一 步 是 选择 了 “在 本 地 进行 编辑 和 测试 ”, 则 这 里 输入 的 URL 应 该 和 
图 6-18 中 输入 的 URL 相同 。 

最 后 一 步 ,对 于 “编辑 完 一 个 文件 后 ,是 否 将 该 文件 复制 到 另 一 台 计 算 机 中 ”的 问题 ， 
选择 “ 否 ” 即 可 ,这 样 就 完成 了 一 个 动态 站 点 的 建立 。 

提示 : 如 果 网 站 目录 被 设置 成 为 Apache 的 一 个 虚拟 目录 ,如 下 :Neshop, 则 在 新 建站 
点 时 ,图 6-18 和 图 6-21 中 的 URL 应 输入 : http://localhost/eshop, 在 图 6-20 中 网 站 目 


eb 标 准 网 页 设计 与 PHP 





DEC > 
基本 | 高 级 | 
站 点 定义 EE < a 





Dreamweaver TTP 《 如 同 浏览 器 ) 与 您 的 测试 服务 器 进行 通信 ， 因 此 它 需要 知道 
您 站 TEL 


您 应 该 使 用 什么 URL 来 浏览 站 点 的 根 目录 ? 中) 
[http://localhost/ 
示例 : http://ServerOne/RootFolder/ 


测试 VRL(CT) 


《上 一 步 四 | 下 一 步 四 3| 取消 | 才 助 





图 6-21 新 建 动态 站 点 第 四 步 
录 应 输入 E:\eshop。 
6.4.2 编写 并 运行 PHP 程序 


在 Dreamweaver 中 编写 并 运行 PHP 程序 的 步骤 是 : 第 一 ,新 建 PHP 文件 ;第 二 , 编 
写 该 文件 的 PHP 代码 ;第 三 ,运行 PHP 文件 。 


1. 新 建 PHP 文件 


PHP 动态 站 点 建立 好 之 后 ,可 以 在 Dreamweaver* 文 件 ? 菜 单 中 选择 “新 建 "-~”* 动 态 
页 ”>PHP 命令 ,就 会 新 建 一 个 PHP 网 页 文件 (保存 时 会 自动 保存 为 扩展 名 为 . php 的 
交 件 3 

或 者 在 如 图 1-8 所 示 的 站 点 “文件 ”面板 中 ,在 站 点 目录 或 子 目 录 上 右 击 ,选择 “新 建 
文件 ”命令 ,也 能 新 建 一 个 PHP 文件 。 


2. 编写 PHP 代码 


在 如 图 6-22 所 示 的 Dreamweaver 主 界面 中 , 单 击 “ 代 码 ” 标 签 , 切 换 到 代码 视图 ,就 可 
在 其 中 输入 PHP 代码。 如 果 和 希望 自动 插入 一 些 常 用 的 PHP 代码 ,可 以 在 工具 栏 左 侧 单 
击 选择 PHP, 单 击 工具 栏 中 对 应 按钮 就 能 将 一 些 常用 的 PHP 代码 或 定 界 符 插入 到 光 
标 处 。 


ET Dreaareaver 8 - [1-1.php CTIL)] 


文件 人 ) 编辑 人 查看 WD 插入 I) 修改 如 文本 中 命令 人 ) 站 点 @) 窗口 如 
于 洛 多 | 昌 唱 胃 | 于 半 “| * 属国 


插入 定 界 符 “ 插入 输出 函数 











图 6-22” Dreamweaver 中 的 代码 视图 
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代码 编写 完毕 后 ,应 该 按 Ctrl 十 S 组 合 键 保存 文件 ,第 一 次 保存 时 会 要 求 输入 文 
件 名 。 


3. 运行 PHP 文件 


在 如 图 6-22 所 示 的 主 界面 中 , 单 击 “ 预 览 ” 按 钮 (快捷 键 为 F12),Dreamweaver 将 打 
开 浏 览 器 ,并 自动 在 浏览 器 中 输入 “http://localhost/ 文 件 名 ”来 运行 该 PHP 文件 。 

提示 : 如 果 预 览 网 页 时 出 现 “ 找 不 到 文件 ”错误 ,一 般 是 因为 在 图 6-20 中 设置 的 站 点 
目录 与 Apache 中 的 网 站 目录 不 一 致 导致 的 。 如 果 预 览 网 页 时 浏览 器 地 址 栏 中 没有 出 现 
“http://localhost/…”, 则 是 因为 新 建站 点 时 没有 选择 使 用 服务 器 技术 导致 的 。 


习 题 6 
1. 以 下 哪 种 技术 不 是 服务 器 端 动态 网 页 技术 ? ( 
A PEP B; JSP C. ASP. NET D. Ajax 
2. 配置 MySQL 服务 器 时 ,需要 设置 一 个 管理 员 账 号 ,其 名 称 是 ( js 
A. admin B. root C. sa D. Administrator 


3. 如 果 Apache 的 网 站 主 目 录 是 E:\eshop, 并 且 没 有 建立 任何 虚拟 目录 , 则 在 浏览 
器 地 址 栏 中 输入 http://localhost/admin/admin. php, 将 打开 的 文件 是 ( Ys 
A. E:\localhost\admin\admin. php 
B. E:\eshop\admin\admin. php 
C. E:\eshop\ admin. php 
D. E:\eshop\localhost\admin\admin. php 





4. PHP 的 配置 文件 是 ,Apache 的 配置 文件 是 
5. 如果 Apache 的 网 站 主 目 录 是 E:\eshop, 要 运行 E:\eshop\abc\rs\123. php 文 
件 , 则 应 在 浏览 器 地 址 栏 中 输入 ,如 果 E:\eshop 是 虚拟 目录 , 则 要 运行 E:\ 





eshop\eshop. php 文件 ,应 在 浏览 器 地 址 栏 中 输入 
6. 对 于 Apache 的 配置 文件 ,请 把 左边 的 项 与 右边 的 描述 联系 起 来 。 
A. httpd. conf ) 用 于 设置 默认 文档 ; 
B. Listen ) 用 于 创建 虚拟 目录 ; 
C. DocumentRoot ) 用 于 设置 网 站 的 访问 端口 ; 
D. Alias ) 用 于 设置 网 站 文档 的 根 目录 ; 
E. DirectoryIndex ( ) 用 于 配置 Apache 服务 器 ; 
7. Apache 服务 器 只 能 支持 PHP 语言 吗 ? 
8. 开发 PHP 程序 前 ,使 用 Dreamweaver 建立 PHP 动态 站 点 有 何 作 用 ? 
9. 有 一 个 PHP 文件 ,存放 在 D:\AppServ\www 目录 下 ,请问 如 果 在 “我 的 电脑 ”中 


上 
( 
( 
( 
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双击 该 PHP 文件 ,该 文件 可 以 运行 吗 ? 
10. 简 述 动态 网 站 和 Web 应 用 程序 的 联系 和 区 别 。 
11. 列举 常见 的 Web 服务 器 软件 及 动态 网 页 设计 语言 。 
12. 将 Apache 服务 器 的 主 目录 设置 为 D:\wgzx, 并 运行 一 个 该 目录 中 的 php 文件 。 
13. 假设 已 在 Apache 服务 器 上 建立 了 一 个 虚拟 目录 D;\wgzx, 请 使 用 Dreamweaver 
新 建 一 个 PHP 动态 站 点 ,站 点 名 称 叫 wgzx, 该 站 点 目录 对 应 D:\wgzx 文件 夹 。 
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学 习 PHP 语言 的 基本 语法 是 进行 PHP 编程 开发 的 第 一 步 ,PHP 语言 的 语法 混合 了 
C Java 和 Perl 语言 的 特点 ,语法 非常 灵活 ,与 其 他 编程 语言 有 很 多 不 同 之 处 ,读者 如 果 学 
习 过 其 他 语言 ,可 通过 体会 PHP 与 其 他 语言 的 区 别 来 学 习 PHP。 


7.1 PHP 语法 入 门 


7.1.1 PHP 代码 的 基本 格式 


PHP 是 一 种 可 舱 入 到 HTML 中 的 脚本 语言 。PHP 的 代码 一 般 由 两 部 分 组 成 ， 

(1) HTML 代码 ,还 可 包括 舱 入 到 其 中 的 CSS 和 JavaScript 代码 ; 

(2) 服务 器 端 脚本 ,位 于 PHP 定 界 符 " 二 ?” 与 *? 二 ”之 间 的 代码 。 

其 中 , (1) 部 分 是 静态 网 页 也 具备 的 , 它 通 过 浏览 器 解释 执行 ,又 称 为 客户 端 代码 。 因 
此 ,PHP 可 以 通俗 地 认为 是 把 服务 器 端 脚本 放 在 “二?” 和 “? 二 ”之 间 , 再 能 和 人 到 静态 网 
页 中 。 

提示 :“ 二 ?” 和 “? 二 ” 称 为 PHP 脚本 的 定 界 符 , 表 示 脚 本 的 开始 和 结束 。 这 是 因为 
在 PHP 文件 中 ,HTML 代码 和 PHP 代码 混杂 在 一 起 ( 即 页 面 和 程序 没有 分 离 ), 必 须 使 
用 专门 的 定 界 符 对 PHP 代码 进行 区 分 。 这 样 服务 器 就 可 以 只 对 “二 ?” 和 “? 二 ”之 间 的 
代码 进行 执行 。 


1. PHP 代码 的 4 种 风格 


根据 定 界 符 的 不 同 ,PHP 代码 有 4 种 风格 , 即 : XML 风格 、 简 短 风格 、 脚 本 风格 和 
ASP 风格 。 使 用 任意 一 种 都 可 将 PHP 代码 嵌入 到 HTML 中 去 。 

1) XML 风格 

这 种 风格 的 PHP 定 界 符 是 二? php ”和 “? 二 ”(<? 和 php 之 间 不 能 有 空格 )。 
例如 : 


<hl>< ?php echo ' 现 在 是 '.date("Y 年 m 月 da 日 H:i:s");? >< /hl> 


2) 简短 风格 
将 定 界 符 “<?php ”中 的 php 省 略 ,就 成 了 简短 风格 , 它 的 定 界 符 是 "<? ”和 *? 二 ”。 
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要 使 用 简短 风格 ,必须 保证 php. ini 文件 中 的 short_open_tag 王 On( 默 认 是 开启 的 ) ,本 书 
中 的 PHP 代码 都 采用 这 种 风格 。 

3) 脚本 风格 

这 种 风格 将 PHP 代码 写 在 二 script 二 标记 对 中 ,例如 : 





<hl> < script language= 'php'>echo ' 现 在 是 '.date(m 月 a 日 ");< /script>< /hi> 

4) ASP 风格 

这 种 标记 风格 将 PHP 代码 写 在 “二 %” 和 *“% 二 ”中 ,我 们 不 推荐 使 用 ,并 且 默 认 是 没 
有 启用 这 种 风格 的 ,因为 php. ini 文件 中 上 默认 是 : asp_tags 二 Off。 


2. PHP 代码 的 注释 


注释 即 代码 的 解释 和 说 明 ,程序 执行 时 ,注释 会 被 PHP 解析 器 忽略 ,因此 浏览 器 端 
看 不 到 PHP 代码 的 注释 。PHP 支持 3 种 风格 的 注释 。 
1) 单行 注释 (// 或 #) 
<? echo 'PHP 动 态 网 页 '; // 输 出 字符 串 
# 单 行 注释 用 # 号 也 可 以 ?> 
需要 注意 的 是 ,单行 注释 的 内 容 中 不 能 含有 *? 二 ”, 和 否则 解释 器 会 认为 PHP 的 脚本 
到 此 结束 了 ,而 去 执行 *? 二 ”后 面 的 代码 。 导 致 多 出 一 个 *? 二 ”而 出 错 ,例如 : 


<hl><? echo ' 这 样 会 出 错 的 '; // 不 会 看 到 ? > 会 看 到 
? >< /hl> 


2) 多 行 注释 (/ x* … x /) 
如 果 要 添加 大 段 的 注释 , 则 使 用 多 行 注释 更 方便 ,但 多 行 注释 符 不 允许 舱 套 使 
用 。 如 : 


<hl><? ”echo ' 这 样 不 会 出 错 '; /* 多 行 注释 的 内 容 
不 会 被 输出 ? > */ ? ></h> 
7.1.2 简单 PHP 程序 示例 
利用 PHP 程序 可 以 输出 字符 串 、.HTML 代码 或 JavaScript 代码 ,下 面 是 几 个 例子 。 
1. 输出 当前 日 期 时 间 (7-1. php) 
下 面 的 程序 以 hl 标题 的 形式 输出 当前 日 期 和 时 间 , 代 码 如 下 : 


<hl> 
<? echo ' 现 在 是 '.date("Y 年 m 月 d 日 H:i:s");? > 
</h> 


在 该 程序 中 ,二 hl 二 和 二 /hl 二 是 HTML 代码 ,二 ? … ?二 是 PHP 代码 。 其 中 ,echo 
是 PHP 的 输出 函数 , 单 引号 括 起 来 的 表示 这 是 一 个 字符 串 常量 ,“. ”是 字符 串 连接 符 ， 
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date() 是 时 间 日 期 函数 ,可 以 按 指定 的 格式 获取 当前 日 期 和 时 间 。 运 行程 序 会 在 网 页 上 
以 一 级 标题 的 形式 显示 : 


现在 是 2014 年 03 月 18 日 16:20:55 
2. 输出 不 同 大 小 的 字体 (7-2. php) 


下 面 的 程序 使 用 PHP 的 循环 语句 重复 输出 过 font 之 标记 ,其 运行 效果 如 图 7-1 
所 示 。 


<html><body> HTML 代码 嵌入 
<? echo '<p>PHP 代码 和 HTML 代码 可 相互 嵌 套 </p> 到 PHP 代码 中 


for ($i=3;$i<7;$i++){ ?> 





<font size="<? echo $i;?> "> 第 <? echo $i-2;?> 次 Hello World! 


</font><br /> 








本 PHP 代码 嵌入 到 
/0dy HTML 代码 中 
</html> 


在 该 程序 中 ,使 用 for 循环 语句 循环 输出 


E TU Ty | 


HTML 代码 “过 font … 之 … 过 /font> 过 br /之 ”。 | a ES RCR 人 


从 结构 上 看 ,这 条 HTML 代码 被 PHP 代码 包 含 。 郧 十 加 | 入 http: //1ocslhost/php/2/exanple/2.12/ 国 
PHP 代 码 和 HT 了 LL 代码 可 相互 说 套 





$i 是 程序 中 定义 的 一 个 变量 ,PHP 规定 所 有 变量 
名 必须 以 “$ ”开头 。 可 以 看 出 ,PHP 代码 可 以 位 | 加 各 on | 
于 HTML 代码 的 任意 位 置 。 如 标记 外 : 二 ? for | 第 3 次 Hello World! 
($i=3; $17; $i 十 十 ){? 之 ,<? }?>, 标 记 内 ”第 4 次 Hello World! 加 
:<? echo $ir2;? > ,甚至 是 标记 的 属性 内 :图 7-1 7-2.php 或 7-3. php 的 运行 结果 
二 ? echo $i;? 之 。 从 结构 上 看 ,可 以 是 HTML 代 
码 中 包含 PHP 代码 ,也 可 以 是 PHP 代码 中 包含 HTML 代码 。 实 际 上 ,PHP 代码 还 可 与 
CSS 或 JavaScript 等 浏览 器 端 代码 互相 能 入 ,因为 PHP 解析 器 只 对 "二 ?” 和 "*? 二 ”之 间 的 
代码 进行 处 理 。 

注意 ; PHP 代码 的 定 界 符 “<<?” 和 *? 之 ”不 能 够 谈 套 。 如 果 遇 到 HTML 代码 (如 
一 font…) ,就 必须 立即 用 *? 之 ”把 前 面 的 PHP 代码 结束 ,即使 这 段 代码 并 不 完整 (但 其 中 
每 行 语句 必须 是 完整 的 )。 





3. 用 PHP 程序 输出 HTML 代码 ,实现 7-2. php 的 功能 (7-3. php) 


在 7-2. php 中 ,由 于 PHP 代码 和 HTML 代码 频繁 地 交替 出 现 ,以 致 经 常 需要 使 用 定 
界 符 结 束 和 开始 一 段 PHP 代码 ,而 如 果 把 HTML 代码 当成 字符 串通 过 PHP 程序 来 输 
出 , 则 可 避免 该 问题 。 代 码 如 下 ,运行 效果 如 图 7-1 所 示 。 
<htm><body> 
<g> FP 代码 和 HEL 代码 可 相互 嵌 套 < /p> 
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<? for($i=3;$i<7;$i++){ 





echo '< font size='.$i .人 > 第 ' . ($i-2) .' 次 Hello World!< /font><br />'; 
了 二 

< /body> < /html> 

提示 : 使 用 PHP 程序 输出 HTML 代码 是 一 项 常用 技巧 。 总 的 原则 是 : 如 果 PHP 
代码 之 间 的 HTML 代码 很 短 , 则 使 用 PHP 程序 输出 这 些 HTML 代码 更 合适 ;而 如 果 
PHP 代码 之 间 的 HTML 代码 很 长 , 则 还 是 作为 外 部 HTML 代码 合适 些 。 这 样 会 使 程 
序 的 可 读 性 改善 ,并 减少 编写 时 出 错 的 几率 。 

4. 输出 JavaScript 代码 并 传递 变量 值 给 JavaScript 或 表单 (7-4. php) 

下 面 的 程序 定义 了 两 个 变量 $ strl 和 $ str2, 并 将 字符 串 赋值 给 这 两 个 变量 (PHP 中 
没有 变量 声明 语句 ,变量 不 需要 声明 就 可 赋值 使 用 ) 。 因 为 JavaScript 代码 也 是 客户 端 代 


码 , 可 以 使 用 PHP 将 JavaScript 代码 作为 字符 串 输出 。 如 果 在 输出 的 JavaScript 代码 或 
表单 代码 中 髋 入 了 PHP 变量 ,就 可 以 把 这 些 服务 器 端 变量 值 传递 到 客户 端 。 


<? $strl="Hello"; // 在 弹出 框 中 显示 
$str2= "start PHP"; // 在 文本 框 中 显示 
echo "< script> "; 
echo "alert (".$strl.™);"; // 在 vavascript 中 使 用 $strl 变量 


echo "< /script> "; > 
< input type= "text" name= "tx" size= 20 value="<? echo $strl; > "> 
<input type= "button" value= 哗 击 "onclicke "tx.value= '<? echo $str2; ?> "> 
运行 该 程序 ,会 在 弹出 警告 框 和 文本 框 中 显示 “Hello”, 当 单 击 按钮 后 ,文本 框 中 的 内 
容 会 变 为 “start PHP”。 


5. 编写 PHP 程序 的 注意 事项 


(1) PHP 是 一 种 区 分 大 小 写 的 语言 ,表现 在 : 

@ PHP 中 的 变量 和 常量 名 是 区 分 大 小 写 的 ; 

@ 但 PHP 中 的 类 名 和 方法 名 ,以 及 一 些 关 键 字 (如 echo ,for) 都 是 不 区 分 大 小 写 的 。 
在 书写 时 ,建议 除了 常量 名 以 外 的 其 他 名 称 都 小 写 。 

(2) PHP 代码 中 的 字符 均 为 半角 (英文 状态 下 ) 字 符 , 中 文 或 全 角 字 符 只 能 出 现在 字 
符 串 常量 

(3) 在 “二 ?” 和 “? 二 ”内 必须 是 一 行 或 多 行 完整 的 语句 ,如 “<? for($i 王 3;$i<7; 
$i 十 十 )? 二 ”不 能 写成 “<? for( $i=3;? 之 <? $i<7; $i 十 十)? 二”。 

(4) 在 PHP 中 ,每 条 语句 以 “;” 号 结束 ,PHP 解析 器 只 要 看 到 “;” 号 就 认为 一 条 语句 
结束 了 。 因 此 ,可 以 将 多 条 PHP 语句 写 在 一 行内 ,也 可 以 将 一 条 语句 写成 多 行 。 
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在 程序 运行 中 ,其 值 不 能 改变 的 量 , 称 为 常量 ,常量 通常 直接 书写 ,如 10、 一 3.6、 
"hello" 都 是 常量 , 除 此 之 外 ,还 可 以 用 一 个 标识 符 代 表 一 个 常量 , 称 为 符号 常量 。 在 PHP 
中 使 用 define() 函 数 来 定义 符号 常量 ,符号 常量 一 旦 定义 就 不 能 再 修改 其 值 。 另 外 ,使 用 
efined() 函 数 可 以 判断 一 个 符号 常量 是 否 已 被 定义 。 例 如 : 





<? gefine("PI","3.1416"); // 定 义 符号 常量 PI 并且 区 分 大 小 写 
define("sITE"," 网 页 设计 学 习 网 ",true); // 定 义 符号 常量 SrTE, 不 区 分 大 小 写 
echo (Gefined("PI”))7 // 如 果 已 被 定义 则 返回 “1” 

2> 


在 PHP 中 ,还 预定 义 了 一 些 符号 常量 ,如 表 7-1 所 示 ( 注 意 __FILE__ 等 常量 左右 两 
边 是 双 下 划 线 ) ,这 些 符 号 常量 可 直接 使 用 ,如 “echo __FILE__;”。 


表 7-1 PHP 预定 义 的 符号 常量 




















常 量 功 能 
_FILE 存储 当前 脚本 的 物理 路 径 及 文件 名 称 
_LINE 存储 该 常量 所 在 的 行 号 
_FUNCTION__ 存储 该 常量 所 在 的 函数 名 称 
PHP_VERSION 存储 当前 PHP 的 版 本 号 
PHP_OS 存储 当前 服务 器 的 操作 系统 名 
2. 变量 


变量 是 指 程序 运行 过 程 中 其 值 可 以 变化 的 量 , 变 量 包括 变量 名 、 变 量 值 和 变量 的 数据 
类 型 三 要 素 。PHP 的 变量 是 一 种 弱 类 型 变量 , 即 PHP 变量 无 特定 数据 类 型 ,不 需要 事先 
声明 ,并 可 以 通过 赋值 将 其 初始 化 为 任何 数据 类 型 ,也 可 以 通过 赋值 随意 改变 变量 的 数据 
类 型 。 下 面 是 一 些 变量 声明 (定义 ) 和 赋值 的 例子 : 





<2$strl="PHP 变 量 1"; // 该 变量 为 字符 串 变量 

Snum 10+ 2* 9; // 该 变量 为 数值 型 变量 

$_date="2013- 9- 8"; // 该 变量 为 字符 串 变 量 ,PHP 无 日 期 型 数据 类 型 
$bol= true; // 该 变量 为 布尔 型 变量 

Snume "赋值 字符 串 '; // 通 过 赋值 改变 变量 的 数据 类 型 

$strl= $numt $_date; // 执 行 相 加 运算 会 使 $strl 转 换 为 数值 型 , 值 为 2013 
var dnp ($num,$_date, $bol); //var dmp 函数 可 输出 变量 的 类 型 


E> 
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说 明 : 

(1) PHP 变量 必须 以 “$ ?开头 ,区 分 大 小 写 ; 

(2) 变量 在 使 用 前 不 需要 声明 ,PHP 中 也 没有 声明 变量 的 语句 ; 

(3) 变量 名 不 能 以 数字 或 其 他 字符 开头 ,其 他 字符 包括 @、# 等 。 例 如 , $ xm、$ _id、 
$ sfzh 都 是 合法 的 变量 名 ,而 $ -id、$ 57zhao、$ zh fen 都 是 非法 的 变量 名 ; 

(4) 变量 名 长 度 应 小 于 255 个 字符 ,不 能 使 用 系统 关键 字 作为 变量 名 。 


7.2.2 变量 的 作用 域 和 生存 期 
1. 变量 的 作用 域 





变量 的 作用 域 是 指 该 变量 在 程序 中 可 以 被 使 用 的 范围 。 对 于 PHP 变量 来 说 ,如 果 
变量 是 定义 在 函数 内 部 的 , 则 只 有 这 个 函数 内 的 代码 才 可 以 使 用 该 变量 ,这 样 的 变量 称 为 
“局 部 变量 ”。 如 果 变 量 是 定义 在 所 有 函数 外 的 变量 , 则 其 作用 域 是 整个 PHP 文件 , 减 去 
用 户 自 定义 的 函数 内 部 (注意 这 和 ASP VBScript 语言 是 不 同 的 ) , 称 为 “全 局 变量 ”。 
例如 : 


<? $e" 全 局 变量 <br>"; // 该 变量 为 全 局 变量 
finction fun() { 


echo $a; // 调 用 函数 也 不 会 输出 “全 局 变量 ” 
$e" 局 部 变量 、"; // 该 变量 为 局 部 变量 
echo $a; 

fin(); /输出 “局 部 变量 ” 

echo $a; /输出 “全 局 变量 ” > 


输出 结果 为 “局 部 变量 、 全 局 变量 ”"。 可 见 函 数 内 不 能 访问 函数 外 定义 的 变量 。 
如 果 一 定 要 在 函数 内 部 引用 外 部 定义 的 全 局 变量 ,或 者 在 函数 外 部 引用 函数 内 部 定 
义 的 局 部 变量 。 可 以 使 用 global 关键 字 。 示 例 代 码 (global. php) 如 下 : 


二 本 和 和 二 < 
<? $a" 全 局 变量 、"; 
finction fun(){ 

四 cbal $a; // 为 了 引用 函数 外 定义 的 变量 $a 

echo $a; 

$e=" 局 部 变量 、"; /将 修改 Sa 的 值 ,添加 static 试 试 

echo $a; /| 输出 “局 部 变量 ” 

} 
fin(); // 调 用 函数 将 输出 “全 局 变量 、 局 部 变量 、” 
echo $a; /| 输出 “局 部 变量 、” 
> 


输出 结果 为 “全 局 变量 、 局 部 变量 、 局 部 变量 、”。 
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提示 : 
(1) global 的 作用 并 不 是 将 变量 的 作用 域 设置 为 全 局 ,而 是 起 传递 参数 的 作用 。 在 
函数 外 部 声明 的 变量 ,如 果 想 在 函数 内 部 使 用 ,就 在 函数 内 用 global 来 声明 该 变量 。 
(2) 不 能 在 用 global 声明 变量 的 同时 给 变量 赋值 。 例如 ,“global $a 二 "全 局 "” 是 错 
误 的 。 
(3) global 只 能 写 在 自 定 义 函 数 内 部 , 写 在 函数 外 部 没有 任何 用 途 。 
(4) 对 于 global 变量 ,应 该 用 完 之 后 就 用 unset() 销 毁 , 因 为 它 很 占用 资源 。 
另外 ,使 用 $GLOBALS[J] 全 局 数组 也 能 实现 在 函数 内 部 引用 外 部 变量 ,例如 : 
<? S$ 于 "全 局 变量 、"; 
finction fon(){ 
echo $GLOBALS['a']; 
$=" 局 部 变量 、"; 


echo $a; /输出 “局 部 变量 ” 

} 
fn(); // 调 用 函数 将 输出 * 全 局 变量 .局 部 变量 ” 
echo $a; // 输 出 * 全 局 变量 ” 


> 


则 输出 结果 为 “全 局 变量 ,局 部 变量 .全 局 变量 ”。 可 见 , $ GLOBALS[] 和 global 是 有 区 
别 的 , 它 只 能 在 函数 内 部 引用 外 部 变量 ,但 不 能 在 函数 外 部 引用 函数 内 部 定义 的 局 部 
变量 。 


2. 变量 的 生存 期 


变量 的 生存 期 表示 该 变量 在 什么 时 间 范 围 内 存在 。 全 局 变量 的 生存 期 从 它 被 定义 那 
一 刻 起 到 整个 脚本 代码 执行 结束 为 止 ; 局 部 变量 的 生存 期 从 它 被 定义 开始 到 该 函数 运行 
结束 为 止 。 

可 见 ,一 般 的 局 部 变量 在 函数 调用 结束 后 ,其 存储 的 值 会 被 自动 清除 ,所 占 存 储 空间 
也 会 被 释放 。 为 了 能 在 函数 调用 结束 后 仍 保留 局 部 变量 的 值 ,可 使 用 静态 变量 ,这 样 当 青 
次 调用 函数 时 ,又 可 以 继续 使 用 上 次 调用 结束 后 的 值 。 静 态 变 量 使 用 static 关键 字 定义 。 
例如 : 


<? function Test() { 


static $w= 0; // 声 明 静 态 变量 $w 
echo $w; 
Swt + } 

Test () ;Test () ;Test () ;Test () ;Test (); > 


程序 的 输出 结果 为 “01234”。 而 如 果 去 掉 程 序 中 的 “static”, 则 运行 结果 为 “00000”。 

提示 : 

(1) 静态 变量 仅 在 局 部 函数 域 中 存在 ,函数 外 部 不 能 引用 函数 内 部 的 静态 变量 。 例 
如 将 global. php 中 的 “$a 二 "局 部 变量 ";” 改 为 “static $a 一 "局 部 变量 ";”, 则 最 后 一 条 
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语句 将 输出 “全 局 变量 ”。 
(2) 对 静态 变量 赋值 时 不 能 将 表达 式 赋 给 静态 变量 。 如 “static $int 一 1 十 2; static 
$int 二 sqrt(9);” 都 是 错误 的 。 
表 7-2 对 3 种 类 型 的 变量 进行 了 总 结 。 
表 7-2 变量 根据 作用 域 和 生存 期 分 类 
类 型 说 明 
全 局 变量 | 定义 在 所 有 函数 外 的 变量 ,其 作用 域 是 整个 PHP 文 件 , 减 去 用 户 自 定义 的 函数 内 部 
局 部 变量 | 定义 在 函数 内 部 的 变量 ,只 有 这 个 函数 内 的 代码 才 可 以 使 用 该 变量 
静态 变量 | 局 部 变量 的 一 种 ,能 够 在 函数 调用 结束 后 仍 保留 变量 的 值 

















7.2.3 可 变 变 量 和 引用 赋值 
1. 可 变 变 量 


可 变 变 量 是 一 种 特殊 的 变量 ,这 种 变量 的 名 称 不 是 预先 定义 的 ,而 是 动态 地 设置 和 使 
用 的 。 可 变 变量 一 般 是 使 用 一 个 变量 的 值 作 为 另 一 个 变量 的 名 称 , 所 以 可 变 变量 又 称 为 
变量 的 变量 。 可 变 变量 直观 上 看 就 是 在 变量 名 前 加 一 个 "$”。 例 如 : 


<? $a 'b'; // 定 义 变量 $a 
$b ' 一 个 变量 <br> '; // 定 义 变量 $ 
echo $$a7 //$$a 就 是 一 个 可 变 变 量 ,相当 于 $b 
$b "变化 后 9 
echo $$a; // 通 过 可 变 变量 输出 变量 Sb 的 值 
Sa 'c'7 
echo $$a; // 相 当 于 输出 变量 $c 的 值 
> 
输出 结果 是 “一 个 变量 二 br 二 变化 后 ”。 由 于 没有 给 $c 赋值 ,第 三 条 echo 语句 不 会 
输出 任何 内 容 。 
2. 引用 赋值 
从 PHP 4.0 开始, 提供 了 “引用 赋值 ”功能 。 即 新 变量 引用 原始 变量 的 地 址 ,修改 新 
变量 的 值 将 影响 原始 变量 ,反之 亦 然 。 引 用 赋值 使 得 不 同 的 变量 名 可 以 访问 同一 个 变量 
内 容 。 使 用 引用 赋值 的 方法 是 : 在 将 要 赋值 的 原始 变量 前 加 一 个 “六 符号。 例如， 
<? $b=10; 
$a= "hello "; //$a 赋 值 为 hello 
$b= &$a; // 变 量 $b 引 用 $a 的 地 址 
echo $a; /| 输出 结果 为 hello 
$b= "world "; /修改 和 的 值 ,Sa 的 值 将 一 起 变化 


echo $a; /| 输出 结果 为 worla 





$a= "cup"7 // 收 改 $a 的 值 ,$b 的 值 将 一 起 变化 
echo $b; /输出 结果 为 cm 
> 


引用 赋值 的 原理 如 图 7-2 所 示 。 引 用 赋值 后 ,两 个 变量 指向 同一 个 地 址 单元 ,改变 任 
意 一 个 变量 的 值 ( 即 地 址 中 的 内 容 ) , 另 一 个 变量 值 也 会 随 之 改变 。 





地 址 传递 前 执行 Sb-&Sa: 后 
变量 $a -| hello 变 最 a TT 
变量 $b 一 一 10 变量 b 


图 7-2 引用 赋值 一 一 变量 地 址 传递 示意 图 




































































注意 : 只 有 已 经 命名 过 的 变量 才 可 以 引用 赋值 ,例如 下 面 的 用 法 是 错误 的 ; $bar 二 
&.(25 * 5)。 


7.2.4 运算 符 和 表达 式 


PHP 的 运算 符 包括 算术 运算 符 、 比 较 运算 符 、 人 逻辑 运算 符 、 赋 值 运算 符 、 连 接 运 算 符 
等 。 而 表达 式 就 是 由 常量 、 变 量 和 运算 符 组 成 的 ,符合 语法 要 求 的 式 子 。PHP 主要 有 5 
种 表达 式 , 即 数学 表达 式 ( 如 3 十 5 * 7) 字符 串 表 达 式 (如 "abc". "gh")、 赋 值 表达 式 ( 如 
$a 十 一 $b) .关系 表达 式 ( 如 i 王 =5) 和 逻辑 表达 式 ( 如 $al|1$b&& $c)。 


1. 算术 运算 符 


算术 运算 符 有 : 加 (十 ) \ 减 (一 ) 乘 (* )、 除 (/)、 取 余 (%) 等 。 算术 运算 符 的 运算 结 
果 是 一 个 算术 值 。 例 如 ，$ a==7/2 十 4* 5 十 1, 结 果 是 24.5。$ b= 一 7%3, 结 果 是 一 1( 对 
于 取 余 运算 符 来 说 ,如 果 被 除数 是 负数 ,那么 取得 的 结果 也 是 负数 )。 如 果 对 10 求 余 可 得 
到 一 个 数 个 位 上 的 数字 。 

如 果 算 术 运 算 符 的 左右 两 边 有 一 操作 数 或 两 个 操作 数 都 不 是 数值 型 时 ,那么 会 将 操 
作 数 先 转换 成 数值 型 ,再 执行 算术 运算 。 

例如 ;$a 二 10 十 '20', 结 果 为 30。$ a 二 10' 十 20', 结 果 为 30。$ a 二 10' 十 2. 2ab8', 结 
果 为 12,.2。$ a 二 10' 十 ab2. 2', 结 果 为 10。$ a= 二 10' 十 true, 结 果 为 11。 

字符 串 转换 为 数值 型 的 原则 是 : 从 字符 串 开 头 取 出 整数 或 浮 点 数 ,如 果 开 头 不 是 数 
字 的 话 ,就 是 0。 布 尔 型 的 true 会 转换 成 数值 1,false 转 成 数值 0。 


2. 连接 运算 符 


PHP 中 连接 运算 符 只 有 一 个 , 即 “. ”, 它 用 于 将 两 个 字符 串 连 接 起 来 ,组 成 一 个 新 字 
符 串 。 如 果 连 接 运算 符 左 右 两 边 任 一 操作 数 或 两 个 操作 数 都 不 是 字符 串 类 型 ,那么 会 将 
操作 数 先 转换 成 字符 串 ,再 执行 连接 操作 。 例 如 : 
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$a= 'PHP'. 5; //$a 的 值 为 FHP5, 注 意 数字 和 "." 之 间 要 用 空格 隔 开 
$b= 'PHP'.'5'; //$b 的 值 为 FHP5 
$c= "PHP".True; //$c 的 值 为 PHP1 
Sd-5 . 'EHP'; //sd 的 值 为 5eHP 


提示 : 如 果 “. ”的 左右 有 数字 ,注意 将 “. ”和 数字 用 空格 隔 开 。 
可 见 “. ”是 强制 连接 运算 符 , 不 管 左 右 两 边 是 什么 数据 类 型 ,都 会 执行 连接 运算 。 


3. 赋值 运算 符 


最 基本 的 赋值 运算 符 是 “二”, 它 用 于 对 变量 赋值 ,因此 它 的 左边 只 能 是 变量 ,而 不 能 
是 表达 式 。 例 如 : $a 二 3 十 5, $b 二 $c 二 9 都 是 合法 的 。 此 外 ,PHP 还 支持 像 C 语言 那 
样 的 赋值 运算 符 与 其 他 运算 符 的 缩写 形式 ,如 “十 =”“. 一 ”“& 一 ”“| 一 ”等 。 

如 $a 十 =3 等 价 于 $a= $a 十 3, $a. = 二 3 等 价 于 $a= $a. 3。 


4. 比较 运算 符 


比较 运算 符 会 比较 其 左右 两 边 的 操作 数 ,如 果 比 较 结果 为 真 , 则 返回 true, 和 否则 返回 
false。PHP 中 的 比较 运算 符 有 : 是 否 相等 (二 = 二)、 大 于 (二 )、 小 于 (=)、 大 于 等 于 (二 =) 








小 于 等 于 (二 二) .不 等 于 (!== 或 < 二 ) ,人 恒 等 于 (二 二 二 ), 非 恒 等 于 (!===)。 

其 中 恒 等 于 (= 一) 表示 数值 相等 并 且 数 据 类 型 也 相同 , 非 恒 等 于 (!= 王 ) 表 示 数 值 
不 相等 或 者 数据 类 型 不 相等 。 

例如 ,车 $a=6,$b==3, 则 $a 二 $b 返回 false,$a>$b 返 回 true,$a 一 >>$b 返 
回 true。$ c=="PHP" 过 "php" 返 回 true。 $c="5" 二 二 5 返回 true, $c="5"= 二 二 = 二 5 返 


回 false, $ c==1 二 二 true 返回 true, $ c==11 二 二 true 返回 true。 
5. 逻辑 运算 符 


逻辑 运算 符 用 来 组 合 逻辑 运算 的 结果 ,比如 对 两 个 布尔 值 或 两 个 比较 表达 式 进 行 逻 
辑 运算 ,再 返回 一 个 布尔 值 (true 或 false) 。PHP 中 的 逻辑 运算 符 有 逻辑 非 (!1) 、 人 逻辑 与 
(&.&& 或 and)、 逮 辑 或 (| | 或 or) ,人 逻辑 异 或 (xor)。 

例如 :15 二 3&&& bb 一 一 "b" 返 回 true, 1(5 之 3&& bb 一 一 一 "b") 返 回 false。 

逻辑 与 (&& 和 and) ,逻辑 或 (|| 和 or) ,虽然 含义 相同 ,但 它们 的 优先 级 却 不 同 。 
“&&.” 的 优先 级 比 “and” 高 “|1” 的 优先 级 比 “or” 高 。 例 如 : $c=(1 or 2 and 0) ,会 返回 
true。 因 为 or 和 and 优先 级 相同 , 则 按 自 右 至 左 的 执行 顺序 , 先 执行 2 and 0。 

而 $c=(1|112 and 0) ,会 先 执 行 1| |2, 再 执行 true and 0, 最 终 返 回 false。 

又 如 $c=false or 1, 返 回 false, $c 二 false| |1, 返 回 true。 因 为 “= 二 ”的 优先 级 比 *or” 
高 ,但 是 比 “|1? 低 。 


6. 加 1/ 减 1 运算 符 


加 1/ 减 1 运算 符 与 C 语言 中 的 加 1/ 减 1 运算 符 相 同 , 包 括 前 加 (十 十 $a)、 后 加 
($a 十 十 ) .前 减 ( $ a) .后 减 ($a )4 种 形式 。 





第 7 章 _ PHP 语言 基础 





前 加 操作 是 先 加 1, 再 赋值 ,后 加 操作 是 先 赋值 ,再 加 1。 例 如 , $a 二 6; $b 王 十 十 
, 则 执行 完 后 , $a 二 7, $b 二 7。$ a 二 6; $b 一 $a 十 十 ,执行 完 后 , $a 一 7,$b 一 6。 
前 减 操作 和 后 减 操作 的 规则 与 此 相同 。 


7. 条 件 运 算 符 
条 件 运算 符 是 一 个 三 元 运算 符 , 其 语法 如 下 : 
条 件 表 达 式 ?表达 式 1: 表达 式 2 


如 果 条 件 表达 式 的 结果 为 true, 则 返回 表达 式 1 的 值 ,否则 返回 表达 式 2 的 值 。 
例如 ,下 面 的 表达 式 会 得 到 “Yes”。 








$ 


a 


$c=10>2 ? "Yes": "No" 


在 分 页 程序 中 , 常 通过 条 件 运 算 符 判断 要 显示 的 分 页 页 面 ,如 果 获 取 的 分 页 变量 
page 的 值 存在 , 则 显示 该 分 页 ,如果 获取 不 到 page 变量 值 , 则 显示 第 1 页 ,代码 如 下 : 

S$page= (isset ($_GET['page']))?$ GET['page']:"1"; 

8. 执行 运算 符 

执行 运算 符 , 即 反 引 号 ( ) (键盘 上 的 反 引 号 键 在 数字 1 键 的 左边 )。 可 用 来 执行 
Shell 命令 。 在 PHP 脚本 中 ,将 外 部 程序 的 命令 行 放 入 反 引号 中 ,并 使 用 echo() 或 print() 
函数 将 其 显示 ,PHP 将 会 在 到 达 该 行 代码 时 启动 这 个 外 部 程序 ,并 将 其 输出 信息 返回 ,其 
作用 效果 与 shell_exec() 函 数 相同 。 例 如 : 

<? $output= "dir 

echo $output; // 输 出 当前 目录 下 的 内 容 

echo shell exec('dir '); // 输 出 当前 目录 下 的 内 容 ,结果 同上 了 

提示 : IIS 出 于 安全 性 考虑 ,禁止 使 用 执行 运算 符 , 执 行 运算 符 只 能 在 Apache 中 
使 用 。 


7.3 数据 类 型 及 类 型 转换 


数据 类 型 是 一 个 值 的 集合 以 及 定义 在 这 个 值 集 上 的 一 组 操作 。 数 据 类 型 的 使 用 往往 
和 变量 的 定义 联系 在 一 起 。 虽 然 PHP 定义 变量 时 不 需要 指定 数据 类 型 ,但 它 会 根据 对 
变量 所 赋 的 值 自动 确定 变量 的 数据 类 型 。 确 定 了 变量 的 数据 类 型 就 确定 了 变量 的 存储 方 
式 ( 占 多 少 字 节 ) 和 操作 方法 。PHP 具有 的 数据 类 型 如 表 7-3 所 示 。 


表 7-3 PHP 中 的 数据 类 型 


数据 类 型 具体 描述 


即 整 数 , 占 4 个 字 节 (32 位 ), 取 值 范围 从 一 2147483648 到 2147483647 之 间 ， 
可 以 采用 十 进 制 . 八 进 制 (0 作 前 缀 ) 十 六 进 制 (0x 作 前 级 ) 表 示 





整 型 (integer) 
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续 表 
数据 类 型 具体 描述 
浮 点 型 (float) 即 实数 (包含 小 数 的 数 ) ,如 1.0、3.14 
布尔 型 (boolean) 只 有 true( 逻 辑 真 ) 和 false( 逻 辑 假 ) 两 种 取 值 
字符 串 (string) 是 一 个 字符 的 序列 。 组 织 字 符 串 的 字符 可 以 是 字母 ,数字 或 者 符号 
数组 (array) 由 一 组 相同 数据 类 型 的 元 素 组 成 的 数据 结构 ,每 个 元 素 都 有 唯一 的 编号 





对 象 (object) 是 面向 对 象 语言 中 的 一 种 复合 数据 类 型 ,对 象 就 是 类 的 一 个 实例 


空 类 型 ,只 有 一 个 值 NULL。 如 果 变 量 未 被 赋值 ,或 被 unset() 函数 处 理 后 的 
变量 ,其 值 就 是 NULL 





NULL 





资源 是 PHP 特有 的 一 种 特殊 数据 类 型 ,用 于 表示 一 个 PHP 的 外 部 资源 , 比 
资源 (resource) 如 一 个 数据 库 的 访问 操作 ,或 者 打开 保存 文件 操作 。PHP 提供 了 一 些 特定 的 
函数 ,用 于 建立 和 使 用 资源 





只 用 于 函数 定义 中 ,表示 一 个 参数 可 接受 多 种 类 型 的 数据 ,还 可 以 接受 别 的 


伪 类 型 函数 作为 回调 函数 使 用 





7.3.1 字符 串 数据 类 型 


任何 由 字母 .数字 ,文字 、\ 符 号 组 成 的 0 到 多 个 字符 的 序列 都 叫 作 字符 串 。 在 Web 程 
序 中 ,经 常 需要 对 字符 串 进 行 操作 。 如 截取 标题 .连接 字符 串 常量 和 变量 等 。PHP 规定 
字符 串 的 前 后 必须 加 上 单 引号 (? 或 双 引 号 (") ,例如 "这 是 一 个 字符 串 ”、 另 一 个 字符 串 '、 
5'\ab'\" 空 字符 串 ) 都 是 合法 的 字符 串 。 但 单 双 引 号 不 能 混用 ,如 day" 是 非法 的 。 

如 果 字 符 串 中 出 现 单 引 号 (7 或 双 引号 ("), 则 需要 使 用 转 义 字符 (\' 或 \") 来 输出 ， 
例如 : 


echo 'I\'ma boy'; // 输 出 结果 为 I'ma boy 
1. 单 引 号 字符 串 和 双 引 号 字符 串 


单 引号 表示 包含 的 是 纯粹 的 字符 串 ; 而 双 引 号 中 可 以 包含 字符 串 和 变量 名 。 双 引号 
中 如 果 包 含 变量 名 则 会 被 当成 变量 ,会 自动 被 蔡 换 成 变量 值 , 单 引号 中 的 变量 名 则 不 会 被 
当成 变量 ,而 是 把 变量 名 当成 普通 字符 输出 。 示 例 代码 如 下 ,运行 效果 如 图 7-3 所 示 。 



















< ?$a= 'tang'; 
$b= 10; http://localhost/php PM 
+ 你 引号 输 : 
echo ' 你 好 $a' // 使 用 单 引 号 输出 $a pe 
echo '<br> '; 下 
<br> 你 好 $a 和 
echo "你 好 $a5 // 使 用 双 引 号 输出 变量 你 好 tang 你 是 第 10 次 光临 司 





MM 尔 旦 y 葬 网 县 时 
echo "你 是 第 条 次 光临 " // 使 用 双 引 号 输出 变量 > 图 7-3 单 引号 字符 串 与 


可 见 , 在 双 引 号 字符 串 中 , $a 和 $b 被 解析 成 了 变量 双 引 号 字符 串 
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$a 和 $b 的 值 。 因 此 建议 : 如 果 要 书写 纯 字 符 串 ,建议 用 单 引 号 字符 串 ; 如 果 要 对 
串 和 变量 进行 连接 操作 ,可 以 使 用 双 引 号 字符 串 , 以 简化 写法 ,例如 以 下 两 条 语句 
价 的 : 


字符 
是 等 


echo "你 是 第 知 次 光临 光 // 注 意 $b 后 面 要 有 个 空格 
echo ' 你 是 第 '.$p .' 次 光临 // 与 上 一 条 语句 完全 等 价 


注意 : 在 双 引 号 字符 串 中 ,如 果 变 量 名 后 有 其 他 字符 的 话 , 要 在 变量 名 后 加 空格 ,和 否 
则 PHP 解析 器 会 认为 后 面 的 字符 也 是 变量 名 的 一 部 分 。 例 如 : 

$sport= "basket'; 

Shabby= "IT like play$ sportiball."; // 包 含 变量 的 错误 方法 

echo Shockbby” 
则 PHP 解析 器 认为 双 引 号 中 的 变量 是 $sportball ,而 $sportball 未 定义 , 视 为 值 为 空 。 
因此 会 输出 “I like play .”。 为 解决 这 个 问题 ,可 以 加 空格 ,或 用 大 括号 将 变量 名 包含 
起 来 。 

Shabby= "T like Play {$sport}ball."; // 包 含 变量 的 正确 方法 

S$hchby= "IT like play$ sport ball."; // 男 一 种 写法 ,$sport 后 有 个 空格 

双 引 号 字符 串 比 单 引号 字符 串 支 持 更 多 的 转 义 字符 , 双 引 号 字符 串 支 持 的 转 义 字符 
如 表 7-4 所 示 。 

表 7-4 双 引 号 字符 串 支 持 的 转 义 字符 








转 义 字符 含义 转 义 字 符 含义 转 义 字 符 含义 
\n 换行 \t 跳 格 Tab \ 反 和 斜 杠 \ 
入 回 车 \" 双 引 号 \$ 显示 $$ 符号 























例如 ,要 在 双 引 号 字符 串 中 输出 $ 符 号 、 反 斜 枉 和 换行 符 。 代 码 如 下 : 

echo 喷 量 \$a= NE'Nn /输出 结果 为 : 变量 $a="\t' 换行 ) 

但 是 换行 符 会 被 浏览 器 当成 空格 忽略 ,只 有 在 网 页 源 代码 中 才能 看 到 换行 符 的 效果 。 
2. 界定 符 表示 字符 串 

除了 使 用 单 引号 或 双 引号 表示 字符 串 外 ,还 可 使 用 界定 符 表示 字符 串 或 变量 ,例如 : 


<? $=' 显 示 该 行内 容 '; 
echo <<<SID 
双 引 号 "可 直接 输出 ,\$i 同 样 可 以 被 输出 出 来 。<br> 
\s$i 的 内 容 为 :Si 
SID; 
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双 引 号 "可 直接 输出 ,$i 同样 可 以 被 输出 出 来 。 

入 的 内 容 为 : 显示 该 行内 容 

说 明 : 

(1) 程序 中 的 “STD” 是 自 定义 的 界定 符 ,也 可 以 使 用 任何 其 他 标识 符 , 只 要 首尾 界定 
符 相 同 即 可 。 

(2) 开始 界定 符 前 面 必须 有 3 个 左 尖 括号 "二 二 二", 后面 不 能 有 任何 空格 。 结 束 界 
定 符 必须 单独 男 起 一 行 ,前 后 不 能 有 空格 或 任何 其 他 字符 (包括 注释 符 ) ,否则 都 会 引起 语 
法 错误 。 

(3) 界定 符 和 双 引 号 唯一 的 区 别 是 界定 符 中 的 双 引 号 不 需要 转 义 就 能 显示 ,因此 ,如 
果 需 要 处 理 大 量 的 内 容 , 同 时 又 不 希望 频繁 使 用 各 种 转 义 字符 , 则 使 用 界定 符 更 合适 。 


3. 获取 字符 串 中 的 字符 
在 PHP 中 ,可 以 通过 给 字符 串 变 量 加 下 标的 方式 获取 字符 串 中 的 字符 。 语 法 为 : 
字符 串 变量 [index] 


其 中 ,index 指定 字符 的 位 置 ,0 表示 第 1 个 字符 ,1 表示 第 2 个 字符 ,以 此 类 推 。 但 该 方法 
不 能 用 来 获取 中 文字 符 ,和 否则 会 出 现 乱码 ,因为 一 个 中 文 占 两 个 字符 。 例 如 : 





<? $i='Tam & Mary'7 
echo $i[1] .$i[4]; /输出 结果 为 og, 因 为 空格 也 算 一 个 字符 
> 
4. 获取 字符 串 的 长 度 
使 用 strlen() 函 数 可 获取 字符 串 的 长 度 , 该 函数 的 参数 是 一 个 字符 串 ,例如 : 
<? echo strlen(' 喜 欢 PHP!'); > 


输出 的 结果 是 8, 这 是 因为 每 个 中 文字 符 占 2 个 字 节 , 加 上 后 面 4 个 英文 字符 总 共 占 8 个 
字 节 。 如 果 要 计算 中 文字 符 串 的 长 度 , 可 以 使 用 mb_strlen() 函 数 ,例如 : 


<? echo mb strlen(' 喜 欢 PHP!"',"gb2312"); > 


则 返回 值 为 6, 将 网 页 字符 编码 设置 为 GBK 或 gb2312 即 可 获得 正确 的 中 文字 符 串 长 度 。 
如 果 要 判断 字符 串 的 长 度 是 否 要 小 于 某 个 值 , 有 以 下 两 种 方法 : 


if(strlen($pwd)< 日 echo 哈 码 太 短 "; 
if(!isset ($pwd{6})) edho "密码 太 短 "; // 如 果 第 7 个 字符 不 存在 


而 第 二 种 方法 不 需要 使 用 函数 ,效率 更 高 。 
7.3.2 数据 类 型 的 转换 
PHP 中 数据 类 型 的 转换 有 以 下 两 种 情况 。 
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1. 自动 类 型 转换 
(1) 如 果 对 变量 重新 赋 了 不 同 数据 类 型 的 值 , 则 变量 的 数据 类 型 会 自动 转换 ,例如 : 


$a= "Hello"; $a 12; 
则 变量 $a 的 数据 类 型 就 会 由 字符 串 型 转换 成 整 型 。 

(2) 如 果 不 同 数据 类 型 的 变量 进行 运算 操作 , 则 将 选用 占 字 节 最 多 的 一 个 运算 数 的 
数据 类 型 作为 运算 结果 的 数据 类 型 。 例 如 : 

$a= 1+ 3.14; 

$b=2+ "2.0"; 

$c= 3+ "php"; 

var durp ($a, $b,$c); // 输 出 foat (4.14) float (4) int(3) 
则 $a 的 数据 类 型 为 浮 点 型 。 在 第 2 个 赋值 表达 式 中 ,首先 将 字符 串 数据 "2. 0" 转 换 成 浮 
点 型 数据 2.0, 然 后 进行 加 法 运算 ,赋值 后 $b 的 数据 类 型 为 浮 点 型 。 在 第 3 个 表达 式 中 ， 
首先 将 字符 串 数据 转换 成 整 型 数据 0, 然 后 进行 加 法 运算 ,赋值 后 $ ec 的 数据 类 型 为 整 型 。 


2. 强制 数据 类 型 转换 


利用 强制 类 型 转换 可 以 将 数据 类 型 转换 为 指定 的 数据 类 型 。 其 语法 如 下 : 

(类 型 名 ) 变量 或 表达 式 

其 中 类 型 名 包括 int、bool,float、double、real、string、array、object, 类 型 名 两 边 的 插 号 
一 定 不 能 省 略 。 例 如 : 


$a= "2.0"; $b= (int)$a; 
$c= (array) $a; print r($c); 


则 $b 将 转换 成 整 型 。$c 将 转换 为 数组 类 型 Array([0] 一 二 2.0) 。 
虽然 强制 数据 类 型 转换 使 用 起 来 很 方便 ,但 也 存在 一 些 问题 ,比如 字符 串 型 转换 成 整 
型 该 如 何 转换 , 整 型 转换 成 布尔 型 该 如 何 转 换 , 这 些 都 需要 一 些 明 确 的 规定 ,PHP 为 此 提 
供 了 相关 的 转换 规定 ,如 表 7-5 所 示 。 
表 7-5 PHP 类 型 转换 的 规定 

















源 类 型 目的 类 型 转换 规则 
float integer 保留 整数 部 分 ,小 数 部 分 无 条 件 舍 去 
Boolean integer 或 float false 转换 成 0,true 转换 成 1 
Boolean string false 转换 成 空 字符 串 "" ,true 转换 成 字符 串 "1" 
十 jt 从 字符 串 开头 取出 整数 ,开头 没有 的 话 , 就 是 0。 例如 字符 串 
es Se "3M"、"8. 6uc"、"x5" 会 转换 成 整数 3、8、0 
iii 和 从 字符 串 开头 取出 浮 点 数 ,开头 没有 的 话 , 就 是 0.0。 例 如 字符 
es 串 "3M"、"8. 6uc"、"x5" 会 转换 成 整数 3.0、8.6、0.0 
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续 表 
源 类 型 目的 类 型 转换 规则 
人 人 空 字符 串 "" 或 字符 串 "0"* 转 换 成 false, 其 他 都 转换 成 true, 因此 字 
四 8 符 串 "false" 也 会 转换 成 true 
integer float boolean 0 转换 成 false, 非 0 的 数 都 转换 成 true 
integer float | string 将 所 有 数字 转换 成 字符 串 ,如 12 转换 成 "12" ,3. 14 转换 成 "3. 14" 
integer float 创建 一 个 新 的 数组 ,第 一 个 元 素 就 是 该 整数 、 浮 点 数 、 布 尔 值 或 字 
array 
boolean string 符 串 
array String 字符 串 "Array" 
object boolean 没有 成 员 的 对 象 转换 成 false, 否 则 会 转换 成 true 








提示 : 如 果 使 用 echo 函数 输出 布尔 值 echo true, 则 会 输出 字符 串 "1"; 若 输出 echo 
false, 则 会 输出 空 字符 串 。 因 为 任何 数据 类 型 输出 时 都 将 被 转换 成 字符 串 。 


7.4 PHP 的 语句 


PHP 的 语句 可 分 为 顺序 执行 语句 .条 件 控制 语句 、 循 环 控制 语句 以 及 包含 语句 等 。 
7.4.1 条 件 控制 语句 

在 PHP 中 ,有 让 语句 和 switch 两 种 条 件 语 句 。if 语句 又 可 分 为 单 分 支 选择 if 语句 、 
双 分 支 选择 计 语 句 和 多 分 支 选 择 if 语句 三 种 。 

1. 单 分 支 选择 证 语句 

一 般 形式 为 : 


(条 件 表达 式 ) { 
语句 块 } 


它 表 示 当 条 件 表达 式 成 立时 ( 值 为 true) ,执行 “语句 块 "。 例 如 : 
if($sex==1) edho "中 敬 的 先生 "; 


如 果 语 句 块 中 包含 多 条 语句 , 则 要 使 用 (} 将 这 些 语句 包含 起 来 ,使 它们 构成 一 条 复合 
语句 。 例 如 : 
if($a> $b) i 
S$tenp= $a; 
$a $b; 
$b= $tenp;} 


2. 双 分 支 选择 if…else 语句 
一 般 形式 为 ; 
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if( 条 件 表达 式 ) 

{ 语句 块 1 } 
else 

{ 语句 块 2 } 


表示 当 条 件 表达 式 值 为 true 时 ,执行 “语句 块 1”, 和 否则 执行 “语句 块 2”。 例 如 : 
if($a)$a= 0; else $s 1; 


该 语句 被 称 为 “开关 语句 ”。 即 如 果 $a 的 值 为 true 或 非 0, 则 让 $a 的 值 为 0; 否 则 让 
$a 的 值 为 1, 因 此 每 执行 一 次 都 会 使 $a 的 值 在 0 和 1 之 间 转 换 。if($ a) 是 if( $a 二 二 
true) 的 简写 形式 。 


3. 多 分 支 选 择 if…elseif…else 语句 
一 般 形式 为 : 
if( 表 达 式 了 语句 块 1 


elseif( 表 达 式 2) 。 语句 块 2 
elseif (表达 式 3) 。 语句 块 3 


else 语句 抉 n 

它 会 首先 判断 表达 式 1 是 否 成 立 , 如 果 成 立 , 则 执行 语句 块 1 ,执行 完 后 ,直接 退出 该 
选择 结构 ,不 再 判断 后 面 的 表达 式 是 否 成 立 。 如 果 表 达 式 1 不 成 立 , 则 再 依次 判断 表达 式 
2 到 表达 式 n 是 否 成 立 ; 如 果 成 立 , 则 执行 对 应 的 语句 块 i; 如 果 所 有 表达 式 都 不 成 立 , 则 
执行 else 后 的 语句 块 n。 例 如 ,要 找 出 3 个 数 中 的 最 大 数 ,程序 如 下 : 


if ($a< $b) $max= $b; 

elseif ($a< $c) $mave= $c; 

else $max $a; 

说 明 : 

(1) 话语 句 还 可 以 内 套 使 用 ,也 就 是 说 “语句 块 ”中 还 可 以 存在 让 语句 。 

(2) (条件 表达 式 ) 后 一 般 没有 “;” 号 ,如 果 有 *;”, 表 示 让 语句 的 语句 抉 为 空 语句 。 

(3) 语句 块 如 果 是 一 条 语句 则 后 面 一 定 要 有 "”";”, 如 果 语 句 块 是 由 {} 包 含 的 复合 语 
句 , 则 人 1} 后 不 要 有 ”;”。 





4. switch/case 语句 


switch 语句 是 多 分 支 选择 计 语 句 的 另 一 种 形式 ,两 者 可 互相 转换 。 在 要 判断 的 条 件 
有 很 多 种 可 能 的 情况 下 ,使 用 switch 语句 将 使 多 分 支 选择 结构 更 加 清晰 。 一 般 形式 为 ， 
switch( 变 量 或 算术 表达 式 ) { 
case 人 当量 DJ: ”语句 块 1 
case( 常 量 2): ， 语句 块 2 
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case( 常 量力 : ”语句 块 n 
default: 语句 块 n+ 1 





} 
下 面 的 程序 根据 时 间 显 示 不 同 的 欢迎 信息 (7-5. php) 。 


<? $a-date(G); /获取 当前 时 间 的 小 时 数 
$a= floor ($a/3); // 将 小 时 数 除 以 3 并 取 底 
switch ($a) { 

case 2:echo 哩 上 好 "brealkc 

case 3:echo "上 午 好 "ibreak; 

case 4:case 5: echo 吓 午 好 ";break; 

case 6:echo "晚上 好 "break 

default: echo "该 睡觉 了 ";break; 
六 


说 明 : 

(1) case 语句 后 不 能 接 表示 范围 的 条 件 表 达 式 ,只 能 接 常 量 。 

(2) 每 个 case 中 的 常量 必须 不 同 , 如 果 相 同 , 则 满足 条 件 时 只 会 执行 最 前 面 case 语 
句 中 的 内 容 。 

(3) 多 个 case 可 共用 一 组 语句 ,此 时 必须 写成 “case 4:case 5:” 的 形式 ,不 能 写成 
“case 4,5:”。 

(4) 每 个 case 后 一 般 都 要 有 一 条 break 语句 ,这 样 执行 完 该 case 语句 后 就 会 跳出 分 
支 结构 ,否则 ,执行 完 该 case 语句 后 还 会 依次 执行 下 面 的 case 语句 ,直到 过 到 break 或 执 
行 完 。 


(5) 各 个 case 和 default 语句 的 出 现 顺序 可 随意 变动 。 
7.4.2 循环 控制 语 名 


循环 结构 通常 用 于 重复 执行 一 组 语句 ,直到 满足 循环 结束 条 件 时 才 停止 。 在 PHP 
中 ,主要 有 4 种 循环 语句 , 即 for 循环 foreach 循环 .while 循环 和 do…while 循环 。 





1. for 循环 


for 循环 语句 是 不 断 地 执行 循环 体 中 语句 ,直到 相应 条 件 不 满足 ,并 且 在 每 次 循环 后 
处 理 计数 器 。for 语句 的 一 般 形 式 为 : 

for 彻 始 表 达 式 ; 循环 条 件 表达 式 ; 计数 器 表达 式 ) 

{ 循环 体 语句 块 } 

其 执行 过 程 为 : 

(1) 执行 初始 表达 式 ( 通 常 是 给 循环 变量 赋 初 值 ) ; 

(2) 判断 循环 条 件 表达 式 是 否 成 立 , 若 成 立 , 则 执行 循环 体 ,否则 跳出 循环 ; 

(3) 执行 一 遍 循环 体 语句 块 ; 

(4) 执行 计数 器 表达 式 (通常 是 给 循环 变量 计数 ) ; 





(5) 转 到 第 (2) 步 判断 是 否 继 续 循环 。 
循环 可 以 嵌 套 ,例如 要 用 for 循环 画 金 字 塔 ,有 下 面 两 种 写法 ,运行 效果 如 图 7-4 
所 示 。 


(1) 写法 1(7-6. php) (2) 写法 2(7-7. php》 
<div alig "canter"> <div align= "oenter"> 
for ($i= 0;$i< 5;$i+ +){ for($i=0;$i< 5;$i++){ 
for($j=0;$j<= $i;$j++) $ac$a ."* "Sy 
ep ns 7 echo $a ."<br/>"; 
echo "<br/>"™; } 
} > 
P</div> </div> 


提示 : 在 对 答 阵 进 行 操作 时 ,通常 需要 双重 循环 庶 套 。 
2. foreach 循环 


foreach 语句 通常 用 来 对 数组 或 对 象 中 的 元 素 进行 遍历 操作 ,例如 数组 中 的 元 素 个 数 
未 知 , 则 很 适合 使 用 foreach 语句 。 其 一 般 形 式 为 : 


foreach 数组 名 as $ value) 
{ 循环 体 语句 块 } 


或 者 


foreach 数组 名 as $key=> $value) 
{ 循环 体 语句 块 } 


foreach 语句 遍历 数组 时 首先 指向 数组 中 第 1 个 元 素 。 每 次 循环 时 ,将 当前 数组 元 素 
值 赋 给 $ value, 将 当前 数组 索引 值 赋 给 $ key, 再 让 数组 指针 向 后 移动 直到 遍历 结束 。 示 
例 程序 如 下 ,运行 效果 如 图 7-5 所 示 。 


基业 //T- 8.Ehp 
$sports=array ("网 球 "," 游 泳 ",'" 短 跑 ",' 唆 道 "; /定义 并 初始 化 一 个 数组 
echo 哦 校 开展 的 运动 项 目 有 :<br />"; 
foreach ($sports as $key= > $value) 
echo $key .":".$value ." "™; > 


| ET Te ol x 





EO ox 

文件 FP) ”编辑 下) 查看 0) 收 ” 

地 址 0) 周 http:71localhest/ 回 SE 
< 





我 校 开展 的 运动 项 目 有 : 
0: 网 球 1: 游 泳 2: 短 跑 3: 柔 道 





国 
图 7-4 画 金 字 塔 程序 图 7-5 foreach 示例 程序 
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3. while 循环 
while 语句 是 前 测试 循环 , 即 是 否 终止 循环 的 条 件 判 断 是 在 执行 循环 体 之 前 ,因此 循 
环 体 可 能 一 次 都 不 会 执行 。 其 一 般 形 式 为 : 


while( 条 件 表达 式 ) { 
循环 体 语句 块 } 


例如 ,要 输出 一 个 有 3 行 的 html 表格 ,程序 (7-9. php) 如 下 ,运行 效果 如 图 7-6 所 示 。 


<table border= "1" width= "300" align= "center"> 


<3 
while ($i< 3){ 
echo <tr><to 这 是 第 入 行 < /to>< /tr>"; // 输 出 表格 行 
$i++3 
} 2></table> ET OT ol xl 
文件 中” 编辑) 查看 WW ”以 
4. do…while 循环 邢 下 加 | 图 http://iocahost/n 辣 | 殴 病 


do…while 语句 是 后 测试 循环 , 它 将 条 件 判 断 放 在 
循环 之 后 ,这 就 保证 了 循环 体 中 的 语句 块 至 少 会 被 执行 
一 次 ,在 某 些 时 候 这 是 非常 有 用 的 。 其 一 般 形式 为 : 








图 7-6 while 语句 的 应 用 


oof 
循环 体 语句 块 } 
while( 条 件 表达 式 ); // 注 意 while (…) 后 有 ;号 


例如 ,下 面 的 程序 会 输出 段落 二 p 二 元 素 一 次 : 


< i=0 

Gof 
echo "<p> 不 满足 循环 条 件 ,仍然 会 输出 一 次 < /p> "; 
Sit++? } 


while($i>1); D> 
想 一 想 : 如 果 将 while( $ i>1) 改 成 while( $1>0) ,程序 会 循环 多 少 次 ? 
5. break 语句 


break 语句 用 来 提前 终止 循环 , 它 可 以 出 现在 while、do… while for、foreach 或 
switch 语句 内 部 ,用 来 跳出 循环 语句 或 switch 语句 。 在 用 “ 穷 举 法 ” 解 题 时 ,通常 找到 解 
后 就 用 break 终止 循环 。 例 如 ,要 输出 一 个 字符 串 ,各 元 素 之 间 用 “, ”号 隔 开 ,最 后 一 个 元 
素 后 没有 “, ”号 ,代码 如 下 (7-10. php): 

<? $sports=array ("网球 "," 游 泳 "," 短 跑 ",'" 采 道 "); 


for($i=0;$i< 47$Si++){ 
echo $sports[$i]; 
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if($i==3) break; // 最 后 一 个 元 素 不 输出 ,”, 换 成 continue 试 试 
echo ","™s 
入 


输出 结果 为 : 
网 球 ,游泳 ,短跑 ,柔道 


提示 : 在 PHP 中 ,break 后 还 可 带 参 数 n, 表 示 跳 出 n 层 循环 ,如 “break 2;” 会 跳出 2 
层 循环 ,而 其 他 语言 的 break 语句 一 般 不 能 带 参 数 , 只 能 跳出 最 近 的 一 层 循 环 。 


6. continue 语句 


列 的 表格 ,代码 如 下 (7-11. php) ,运行 结果 如 图 7-7 所 示 。 


< table border= "1" width= "200" align= "center"> < tr> 





<? $i=0; 
while ($i< 9){ 

echo "<td 第 Si 格 </td> /输出 表格 的 单元 格 

$i++? 

if ($i%3< >0|1$i==9) continuey ET ol 
人 她 十 | 息 http: //1ocsalhost/pt 到 | 贬 接 
</tr>< /table> 








提示 : 如 果 正 好 是 最 后 一 次 循环 时 用 continue 语句 
结束 本 次 循环 , 那 就 相当 于 提前 终止 循环 ,这 种 情况 下 
continue 和 break 可 互 换 。 如 7-10. php 中 的 i 计 ($i= 一 
3) break 可 换 成 continue, 因 为 $1 二 3 时 正好 是 最 后 一 次 循环 。 


7.4.3 文件 包含 语句 


为 了 提高 代码 的 重用 性 ,可 以 将 一 段 公用 的 代码 保存 为 一 个 单独 的 文件 ,然后 在 其 他 
需要 这 段 代 码 的 文件 中 ,使 用 包含 语句 将 文件 引入 。PHP 提供 了 4 种 包含 语句 。 














图 7-7 ”continue 语句 的 应 用 


1. include 语句 


使 用 include 语句 可 以 在 指定 的 位 置 包含 一 个 文件 ,语法 如 下 : 

include (path/filename); // 括 号 可 省 略 

当 一 个 文件 被 包含 时 ,编译 器 会 将 该 文件 的 所 有 代码 内 入 到 include 语句 所 在 的 
位 置 。 

例如 ,文件 7-12. php 和 7-13. php 位 于 同一 目录 下 ,在 7-12. php 中 可 以 使 用 include 
语句 将 7-13. php 包含 进来 。 代 码 如 下 : 
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芝 间 //7-12.php 

echo 哦 的 名 字 是 $name<br> "; 

include ("7- 13.php'); // 也 可 嵌入 7-14.html 
echo 哦 的 名 字 是 $name, 我 今年 $age 岁 。"; 


> 





<? //7- 13.pp 

Sname= 'tangsix'; 

$age= 33; > 
则 编译 器 在 执行 7-12. php 前 ,会 把 7-13. php 的 代码 嵌入 到 7-12. php 中 ,7-12. php 的 运 
行 结果 如 图 7-8 所 示 。 可 见 7-12. php 等 价 于 : 


<? ”echo 哦 的 名 字 是 $name< br>"; 


$name= 'tangsix'; /嵌入 的 三 13.php 的 代码 
$age= 33; 
echo 哦 的 名 字 是 $name 我 今年 $age 岁 史 ET TT ol xl 
文件 四 “编辑 四) 查看 四 收藏 内 ”| 
随 王 加 多 http:y/iocahostypkpyphptoolychap 回 | 


include 语句 也 能 包含 html 文件 , 这 时 | 我 的 名 字 是 到 
include 语句 会 自动 使 用 ?二 ”将 前 面 的 php 代码 ”| 我 的 名 宁 是 tangsix ,我 年 33 岁 司 
结束 , 用“ 二?” 开始 后 面 的 php 代码 。 例 如 将 图 7-8 7-12. php 的 运行 结果 
7-12. php 文 件 中 include (7-13. php) 换 成 include 
(7-14. html) 。7-14. html 代码 如 下 : 





< center> &copy; 程序 员 实验 室 版 权 所 有 < /center> 
则 7-12. php 等 价 于 : 

<? echo 噬 的 名 字 是 $name< br> "; > 

< center> gcopy; 程序 员 实 验 室 版 权 所 有 < /center> 

<? echo " 吃 的 名 字 是 $name, 我 今年 $age 岁 "; 

> 

提示 : 如 果 被 包含 文件 与 包含 文件 不 在 同一 目录 中 , 则 需要 在 被 包含 文件 的 文件 名 
前 加 路 径 。 有 3 个 特殊 的 路 径 :“../” 代 表 上 一 级 目录 ,“./” 代 表 当 前 目录 ,“/” 代 表 网 站 
根 目 录 ( 不 是 虚拟 目录 )。 例 如 ,“include(... /file4. php');” 将 包含 位 于 当前 目录 上 一 级 目 
录 中 的 file4. php。 


2. include_onece 语句 


include_once 语句 与 include 语句 相似 ,也 用 于 包含 文件 。 唯 一 的 区 别 是 : 使 用 
include_once 包含 文件 时 ,如 果 该 文件 中 的 代码 已 被 包含 过 , 则 不 会 再 次 包含 。 这 样 可 以 
避免 出 现 函数 重 定义 .变量 重 新 赋值 等 问题 。 
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3. require 语句 


require 语句 也 用 于 包含 文件 ,但 与 include 语句 在 错误 处 理 上 的 方式 不 同 。 当 包含 
文件 失败 时 (如 包含 文件 不 存在 ), require 语句 会 出 现 致 命 错误 ,并 终止 程序 的 执行 ,而 
include 语句 只 会 抛 出 警告 信息 并 继续 执行 程序 。 


4. require_once 语句 


require_once 语句 与 require 语句 功能 相似 。 但 它 在 包含 文件 之 前 会 先 检查 当前 文 
件 代 码 是 否 被 包含 过 ,如 果 该 文件 已 经 被 包含 了 , 则 该 文件 会 被 忽略 ,不 会 被 再 次 包含 。 

一 般 来 说 ,由 于 include 语句 在 出 错时 不 会 终止 程序 的 执行 ,并 显示 警告 信息 ,这 容易 
产生 安全 问题 ,因此 建议 包含 PHP 程序 文件 时 尽量 使 用 require 或 require_once 语句 。 


7.5 数组 


数组 是 按 一 定 顺 序 排列 ,具有 某 种 数据 类 型 的 一 组 变量 的 集合 。 数 组 中 的 每 个 元 素 
都 是 一 个 变量 , 它 可 以 用 数组 名 和 唯一 的 索引 (又 称 “ 下 标 ” 或 “ 键 名 ”) 来 标识 。 
7.5.1 数组 的 创建 

PHP 中 创建 数组 有 两 种 方法 : 使 用 array() 函 数 创建 ; @ 直 接 给 数组 元 素 赋 值 。 

1. 使 用 array() 函 数 创 建 数组 

PHP 的 数组 不 需要 定义 ,可 以 直接 创建 。 创 建 数 组 一 般 使 用 array() 函数, 假设 要 创 
建 一 个 包含 4 个 元 素 的 一 维 数组 ,简单 形式 是 : 

Scitys= array(" 长 沙 "" 疾 阳 "" 吵 德 " "湘潭 7 
则 该 数组 的 长 度 为 4。 各 个 数组 元 素 的 索引 值 分 别 为 : 0、1、2、3, 如 $citysL1J 表 示 第 2 个 
数组 元 素 。 

如 果 要 自行 给 每 个 元 素 的 索引 赋值 ,可 以 使 用 完整 形式 定义 : 

$citys=array('cs'=> 发 沙 ','hy'=> ' 衡 阳 ','od'=> ' 常 德 ','xt'=> "湘潭 四 

可 见 , 完 整形 式 增加 了 对 数组 元 素 索 引 的 赋值 ,这 时 各 个 数组 元 素 的 索引 值 分 别 为 : 
cs、hy、cd、xt, 如 $citysLhyj 表 示 第 2 个 数组 元 素 ( 注 意 此 时 不 能 再 使 用 $ citysL1] 访 问 该 
数组 元 素 )。 


2. 直接 给 数组 元 素 赋值 创建 数组 
也 可 以 创建 一 个 空 数组 ,然后 再 给 每 个 数组 元 素 赋值 。 例 如 : 


$citys=array (); // 创 建 空 数组 ,该 语句 可 省 略 
$citys[1]= 吐 沙 "; $citys[3]=" 常 德 " $citys[]= "湘潭 "; 
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print r($citys); // 打 印 数 组 
上 述 代 码 的 输出 结果 为 : 
Array([1]=> 长 沙 [3]=> 常 德 [4]=> 湘 潭 ) 


可 见 , 如 果 给 数组 元 素 赋值 时 不 写 该 元 素 的 索引 值 , 则 该 数组 元 素 默认 的 索引 值 为 数 
组 中 最 大 的 索引 值 加 1。 如 果 数 组 中 没有 正 整数 形式 的 索引 值 , 则 默认 的 索引 值 为 0。 
实际 上 创建 空 数组 的 语句 也 可 省 略 , 那 样 就 是 通过 直接 给 数组 元 素 赋值 创建 数 
组 了 。 


3. 创建 数组 注意 事项 


(1) 如 果 数 组 元 素 的 索引 是 一 个 浮 点 数 , 则 索引 将 被 强制 转换 为 整数 ,如 $ citys[3. 5] 
将 转换 成 $ citysL3]。 如 果 索 引 是 布尔 型 数据 , 则 将 被 强制 转换 成 1 或 0, 如 果 索 引 是 一 
个 整数 字符 串 , 则 将 被 强制 转换 成 整数 ,如 $ citys["3"] 将 转换 成 $ citys[L3]。 

(2) 如 果 数 组 元 素 的 索引 是 字符 串 , 则 最 好 要 给 索引 加 引号 ,如 $ citys 王 array(Ccs' 一 过 
长 沙 ',…) 不 要 写成 $ citys 王 array(cs 王 过 长沙)。$citys['cs 中 =" 长 沙 " 不 要 写成 
$citysLesj 二 "长 沙 "。 否 则 虽然 不 会 出 错 ,但 程序 的 运行 效率 将 大 打折 扣 。 


4. PHP 数组 的 特点 








(1) 数组 索引 既 可 以 是 整数 ,也 可 以 是 字符 串 。 如 果 索 引 值 是 整数 , 则 称 为 索引 数 
组 ,如 果 索 引 值 是 字符 串 , 则 称 为 关联 数组 。 如 果 既 有 整数 又 有 字符 串 , 则 称 为 混合 数组 。 

(2) 数组 长 度 可 以 自由 变化 。 

(3) 同一 数组 中 各 元 素 的 数据 类 型 可 以 不 同 ,其 至 数组 元 素 可 以 又 是 数组 。 例 如 : 


$hybrid=array (长 沙 ",0731,true,array(" 天 心 区 "," 哺 花 区 ",'" 吴 甘 区 ")); 
输出 结果 为 : 

Array([0]=> 长 沙 [1]=>473 [2]=>1 [3]=>Array([0]=> 天 心 区 [1]=> 雨 花 区 [2]=> 芙 其 区 )) 
7.5.2 访问 数组 元 素 或 数组 

1. 访问 数组 元 素 


数组 元 素 也 是 变量 ,访问 单个 数组 元 素 最 简单 的 方法 就 是 通过 “数组 名 [索引 ]” 的 形 
式 访问 。 例 如 ,$i 二 $citys[3j、echo $citysL1]。 也 可 以 使 用 大 括号 访问 数组 元 素 , 如 
echo $ arr{3}。 

如 果 要 访问 所 有 数组 元 素 , 可 以 使 用 foreach 语句 遍历 数组 。 


2. 添加 、 删 除 、 修 改 数组 元 素 


如 果 给 已 存在 的 数组 元 素 赋值 ,将 修改 这 个 数组 元 素 的 值 , 给 不 存在 的 数组 元 素 赋 
值 ,将 添加 新 的 数组 元 素 ,而 要 删除 数组 元 素 ,一 般 使 用 unset() 方 法 。 例 如 





<? S$arr=array(ll,22,33,44); 


$arr[0]= 66; // 修 改 数 组 元 素 
S$arr[D]= 长沙 /修改 数组 元 素 
unset ($arr[2])7 // 删 除数 组 元 素 
Sarr[]= 55; // 添 加 数组 元 素 
$arr[5]= 88; // 添 加 数组 元 素 
Print r($arr); > 
运行 结果 为 : 


Array([0]=> 66 [1]=> 长 沙 [3]=>44 [4]=>55 [5]=> 88) 
注意 : 删除 的 元 素 索引 不 会 被 新 添加 的 数组 元 素 占 用 。 
3. 访问 数组 


数组 名 代表 整个 数组 ,将 数组 名 赋值 给 变量 能 够 复制 该 数组 ,数组 名 前 加 *& "表示 该 
数组 的 地 址 ,数组 同样 支持 传 值 赋 值 和 传 地 址 赋值 。 例 如 : 


<? $citys=array(" 长 沙 … "衡阳 "常德 .湘潭 ); 


Surbanr $citys; // 复 制 数组 ( 传 值 赋值 ? 
$urban[1]= "娄底 /修改 新 数组 元 素 的 值 
Print r($citys); // 打 印 原 数组 
Print r($urban); // 打 印 新 数组 
// 下 面 为 传 地 址 赋值 

$10c= &$citys; // 引 用 复制 数组 ( 传 地 址 赋值 
$loc[1]= "郴州 /修改 新 数组 元 素 的 值 
print r($citys); // 打 印 原 数组 
Print r($10c); // 打 印 新 数组 
> 

输出 结果 为 : 


Array([0]=> 长 沙 [=> 衡 阳 [2]=> 常 德 [3]=> 湘 潭 ) 
Array([0]=> 长 沙 [1]]=> 娄 底 [2]=> 常 德 [3]=> 湘 潭 ) 
Array([0]=> 长 沙 [=> 郴 州 [2]=> 常 德 [3]=> 湘 潭 ) 
Array([0]=> 长 沙 [1]=> 郴 州 [2]=> 常 德 [3]=> 湘 潭 ) 


可 见 ,引用 赋值 会 使 新 数组 和 原 数组 指向 同一 个 数组 的 存储 区 ,修改 新 数组 的 值 , 原 
数组 的 值 也 随 之 改变 。 


7.5.3 多 维 数组 


创建 多 维 数组 同样 有 两 种 方法 : 一 是 使 用 array() 函 数 , 二 是 直接 给 数组 元 素 赋值 。 
例如 要 创建 一 个 如 下 的 二 维 数组 : 
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使 用 array() 函数 创 建 的 代码 如 下 : 
$arr=array(array ("玫瑰 "," 百 合 "," 兰 花 "),array( 萤 果 "," 香 克 "," 葡 萄 "," 龙 眼 ")); 
由 于 这 个 语句 没有 给 索引 赋值 ,所 用 的 默认 的 索引 如 下 : 

[o][o] [LoJ[L1] [o][2] 

[1][o] [LI] [1][L2] [1JC3] 





要 访问 二 维 数组 的 元 素 , 可 以 使 用 "数组 名 [索引 1] [索引 2]” 的 形式 访问 。 例 如 : 


echo $arr[1] [2]; // 访 问 数组 元 素 ,输出 葡萄 
$arr[0] [3]= "只 莉 " // 添 加 数组 元 素 
$arr[1] [3]= 哇 圆 "; // 修 改 数 组 元 素 
unset ($arr[1] [0]); // 删 除数 组 元 素 


输出 结果 为 : 


葡萄 Array([0]=>Array([0]=> 玫 瑰 [1]=> 百 合 [2]=> 兰 花 [3]=> 莱 莉 ) [1]=>Array([1]=> 香 楚 [2]= 
> 葡萄 [3]=> 桂 圆 )) 


7.5.4 操作 数组 的 内 置 函 数 


PHP 提供 了 很 多 操作 数组 的 内 置 函 数 , 用 来 对 数组 进行 统计 、 快 速 创建 .排序 等 
操作 。 


1， count() 函数 


count() 可 返回 数组 中 元 素 的 个 数 , 语 法 格式 为 : int count(array arr[ ，int mode]) 。 


例如 : 
<? S$citys= array(" 长 沙 … "衡阳 "常德 湘潭) 
echo count ($citys); /输出 4 
Sarr= array(array(" 政 瑰 …" 耳 合 " "兰花 mvarray( 哗 果 " 咯 区 葡萄" "龙眼 风 )7 
echo count ($arr); /| 输出 2 
echo count ($arr,1); /| 输出 9% 第 1 维 2 个 ,第 2 维 7 个 , 共 9 个 
> 


提示 : 如 果 数 组 是 多 维 数组 , 则 count() 函 数 默认 也 是 统计 第 一 维 的 元 素 个 数 ; 如果 
要 统计 多 维 数组 中 所 有 元 素 的 个 数 , 则 可 以 将 mode 参数 的 值 设置 为 1。 


2. max() .min() .array_sum() 函数 


max() 和 min() 可 分 别 返 回 数 组 中 最 大 值 元 素 和 最 小 值 元 素 ,而 array_sum() 可 统计 





所 有 元 素 值 的 和 。 例 如 : 


<? $score=array(70,80,92,60); 


echo max ($score); /| 输出 9 
$grade=array (A','C', ID', 'B); 

echo min ($grade); /输出 A 

echo array sum($soore); // 输 出 302 
> 


3. array_count_values( ) 函数 


该 函数 用 于 统计 数组 中 所 有 值 出 现 的 次 数 ,并 将 结果 返回 到 另 一 数组 中 。 例 如 


<? $level=array(2,1,3,1,2,3,2,4,3,1,4); 
$mp=array count values ($level); 
Print r($tmp); // 输 出 Array([2]=>3 [1]=>3 [3]=>3 [4]=>2) 


该 函数 常用 在 投票 程序 中 ,可 以 将 原 数 组 中 的 每 个 值 看 成 是 一 个 投票 选项 。 
4. explode( ) 函数 


explode() 通 过 切 分 一 个 具有 特定 格式 的 字符 串 而 形成 一 个 一 维 数组 ,数组 中 的 每 个 
元 素 就 是 一 个 子 串 。 语 法 为 : explode(separator，string[ ,limit])。 例 如 : 


<? $str= ' 湖 南 湖北 广东 河南 '; 


$arr= explode (" ", $str); // 通 过 切 分 生成 数组 $arr 
Print r($arr); 人 

输出 结果 为 ， 
Array([0]=> 湖 南 [=> 湖 北 [2]=> 广 东 [3]=> 河 南 ) 
说 明 : 


(1) explode 的 分 隔 符 可 以 是 空格 等 一 切 字符 ,但 不 能 为 空 字符 串 ""。 
(2) limit 参数 可 限制 返回 数组 元 素 的 个 数 。 


5. implode() 函数 


implode() 使 用 连接 符 将 数组 中 的 元 素 连 接 起 来 形成 一 个 字符 串 。 它 实现 了 与 
explode() 相 反 的 功能 。 例 如 : 

<? S$grade=array('A','C','D','B'); 

$1link= implode ("— — ", $grade); 

echo $1ink; / 痊 出 挛 -c--D--B 人 > 


6. range() 函数 


range() 可 以 快速 创建 一 个 从 参数 start 到 end 的 数字 数组 或 字符 数组 。 语 法 为 ， 
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array range(mixed start, mixed end)。 例 如 : 





<? $score=range(2,5); // 等 价 于 $score=array(2,3,4,5); 

print r($score); // 和 输出 Array([0]=>2 [1]=>3 [2]=>4 [3]=>5) 
$score= range ('D', 'A'); // 等 价 于 $score=array('D','C', 'B','A'); 

> 

7. 排序 函数 


数组 排序 函数 如 表 7-6 所 示 。 注 意 排序 函数 中 的 a 表示 association ,表示 排序 过 程 中 
保持 “ 键 值 对 ”的 对 应 关系 不 变 。r 表示 reverse, 表 示 按 降序 进行 排序 。k 表示 key, 表 示 
按照 数组 元 素 的 “ 键 ”" 进 行 排序 。natsort 函数 是 用 “自然 排序 ”的 算法 对 数组 arr 元 素 的 值 
进行 升序 排序 ,所 谓 自然 排序 ,是 指 小 数 总 排 在 大 数 前 ,如 img2. gif 将 排 在 img10. gif 






































之 前 。 
表 7-6 数组 排序 函数 
函数 排序 依据 排序 规则 “ 键 值 对 "是 否 改变 
sort() 元 素 值 升序 是 
rsort() 元 素 值 降序 是 
asort() 元 素 值 升序 否 
arort() 元 素 值 降序 否 
ksort() 索引 值 升序 十 
krsort() 索引 值 降序 否 
natsort() 元 素 值 升序 否 
natcasesort() 元 素 值 升序 和 否 
shuffle() 元 素 值 随机 乱 序 是 
排序 函数 示例 程序 如 下 : 
<? S$pic= array('imgl2.gif'v imgl0.gif' 'img2.gif"', imgl.gif' "img01.gif"'); 
sort ($pic); // 将 sort 依 次 换 成 asort,rsort,arsort 


Print r($pic); > 
输出 结果 依次 为 : 


Array ([0]=> img01.gif [1]=> imgl.gif [2]=> imgl0.gif [3]=> imgl2-gif [4]=> img?.gif) 
Array ([4]=> img01.gif [3]=> ingl.gif [1]=> imgl0.gif [0]=> ingl2.gif [2]=> img2.gif) 
Array ([0]=> img2-gif [1]=> imgl2.gif [2]=> imgl0.gif [3]=> imgl.gif [4]=> img01.gif) 
Array ([2]=> img2-gif [0]=> imgl2.gif [1]=> imgl0.gif [3]=> imgl.gif [4]=> img01.gif) 


8. array_reverse() 和 array_unique() 函数 


array_reverse 函数 用 来 对 数组 元 素 进 行 逆序 排列 ,返回 逆序 后 的 新 数组 。array_ 





unique() 函数 可 删除 数组 中 重复 的 元 素 , 返 回 没 有 重复 值 的 新 数组 。 例 如 : 


<? $color=array('a'=> 'blue', 'red' 'green' 'red'); 


S$revearr= array reverse ($color); 


S$uniarr=array unique ($color); 


Print r($revearr); 


Print r($uniarr); 


9. 搜索 函数 


// 答 出 Array([0]=> red [1]=> green [2]=> red [al]=>blue) 
// 输 出 array([alj=>blue [0]=> red [1]=> green) > 


搜索 函数 用 来 检查 数组 中 是 否 存 在 某 个 值 或 某 个 键 名 ,假设 示例 数组 为 $ color 二 
"red), 则 各 搜索 函数 的 功能 如 表 7-7 所 示 。 


array(a' 一 二 由 lue'red'， 


green 


表 7-7 数组 搜索 函数 及 功能 


功 能 


示 例 





in_ array (mixed target, array 
arr) 


检查 数组 中 是 否 存在 某 个 值 ， 
返回 true 或 false 


in_array(Yred', $ color) ,返回 true 





array _ search ( mixed target, 
array arr) 


检查 数组 中 是 否 存在 某 个 值 、 
如 果 存 在 则 返回 其 对 应 的 索 
引 值 ,否则 返回 false 


array_search(blue', $ color) ,返回 a 





array_key_exists (mixed key, 
array arr) 


检查 数组 中 是 否 存 在 指定 的 
键 ,返回 true 或 false 


array_ key _exists (3, $color), 返 
回 false 





array_ keys (array arr, mixed 


返回 数组 中 所 有 的 键 名 ,将 其 
保存 到 一 个 新 数组 中 。 若 指 


array_keys($color), 返 回 Array 
([0]=>a [1]=>0 [2]=>1 [3] 
= 二 2) 





wn i array_ keys ( $color, 'red'), 返 回 
Array ( [0]=>0 [1]=>2) 
，| array_values($$color) ,返回 Array 
array_values(array arr) A ([0]=>blue [1]=>red [2]=> 








green [3] 一 二 red ) 


提示 : 如 果 想 检查 数组 中 是 否 含有 某 个 键 名 ,可 以 用 array_search() 函 数 , 如 果 想 获 
取 所 有 匹配 的 键 名 , 则 应 该 使 用 array_keys() 函 数 ,并 设置 search 参数 。 


10. 数组 和 变量 间 的 转换 函数 


1) list 函数 


list() 函 数 可 以 用 数组 中 的 元 素 为 一 组 变量 赋值 ,从 而 通过 数组 得 到 一 组 变量 。 格 


式 为 : 


Void list (varl，Vvar2,……，Var D)=array arr 


list 要 求 数组 arr 中 所 有 键 为 数字 ,并 要 求 数字 键 从 0 开始 连续 递增 。 例如: 
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<? s$str- ' 湖 南 湖北 广东 河南 '; 


$arr= explode(" ",$str); 


//$arr=array([0]=> 湖 南 [1]=> 湖 北 [2]=> 广 东 [3]=> 河 南 ) 


list ($s1,$s2,$s3)= $arr; //$s 王 "湖南 ',$s "湖北 ',$s= 广东 ' 
echo $sl."<br>".$s2."<br>".$s3."<br> "7 > 


2) extract 函数 

extract() 函 数 能 利用 一 个 数组 生成 一 组 变量 ,其 中 变量 名 为 数组 元 素 的 键 名 ,变量 值 
为 数组 元 素 的 值 。 如 果 生 成 的 变量 名 和 已 有 的 变量 名 冲突 , 则 可 使 用 其 第 二 个 参数 按 一 
组 规则 来 处 理 。 

3) compact 函数 

compact 函数 利用 一 组 变量 返回 一 个 数组 , 它 实 现 了 和 extract 函数 相反 的 功能 。 数 
组 元 素 的 键 名 为 变量 名 ,数组 元 素 的 值 为 变量 值 。extract 函数 和 compact 函数 的 示例 


如 下 : 


<? $citys=array(csr> 路 沙 w"hby=>" 噜 阳 "ot> 吵 德 wxt> "湘潭 7 
extract ($citys); //$cs= 长 沙 vShy "衡阳 ',$od ' 常 德 ',$xt= ' 湘 潭 ' 


echo $xt; 


// 输 出 湘潭 


$newcitys= compact ('cs', "cd' 'xt'); // 用 变量 组 成 数组 
Print r ($newcitys); /输出 array([cs]=> 长 沙 [cd]=> 常 德 [xt]=> 湘 潭 ) ”2> 


11. 数组 指针 函数 


每 一 个 PHP 数组 在 创建 之 后 都 会 建立 一 个 “当前 指针 ”(current) ,该 指针 默认 指向 
数组 的 第 一 个 元 素 ; 通 过 指针 函数 可 获取 指针 指向 的 元 素 值 或 键 名 ,也 可 移动 当前 指针 ， 
对 数组 进行 遍历 。 数 组 指针 函数 如 表 7-8 所 示 。 


表 7-8 数组 指针 函数 























函 数 功 能 
current() | 返回 当前 指针 所 指 元 素 的 “ 值 ” 
key() 返回 当前 指针 所 指 元 素 的 “ 键 名 ” 
next() 移动 指针 使 指针 指向 下 一 个 元 素 
prev() 移动 指针 使 指针 指向 上 一 个 元 素 
end() 使 指针 指向 最 后 一 个 元 素 ,并 返回 当前 指针 所 指 元 素 的 值 
reset() 使 指针 指向 第 一 个 元 素 , 并 返回 当前 指针 所 指 元 素 的 值 
ek) 以 数组 形式 返回 当前 指针 所 指 的 元 素 ,该 数组 有 4 个 元 素 , 其 中 键 名 为 1 和 value 的 元 





素 值 为 当前 元 素 的 值 ; 键 名 为 0 和 key 的 元 素 值 为 当前 元 素 的 键 名 





例 7.1 移动 数组 指针 并 遍历 数组 。 
利用 next() 函 数 和 循环 语句 可 以 遍历 数组 ,以 实现 和 foreach 语句 类 似 的 功能 。 


<? $citys=array("cs=> 吐 沙 ","mhy"=> 响 阳 ",cd=>" 常 德 ",xt=> "湘潭 "); 
echo key ($citys) ." ' .ourrent ($citys) ." '.next ($citys)." '.next ($citys).'<br> '; 
echo prev($citys).' '.end($citys).' '.reset ($citys).'<br> "7 

print r(each($citys)).'<br>'; 


reset ($citys); 
dof 
echo key($citys) .=> '-current ($citys); } 
while (next ($citys) == false); // 不 要 写成 while(next ($citys)); > 
输出 结果 为 : 
cs 长 沙 衡阳 常德 
衡阳 湘潭 长 沙 


Array([1]=> 长 沙 [value]=> 长 沙 [0]=>cs [key]=>cs) 
cs=> 长 沙 py=> 衡 阳 ct > 常德 xt=> 湘 潭 


提示 : 上 例 中 do…while 语句 的 循环 条 件 不 要 简写 成 next($citys), 因 为 若菜 个 数 
组 元 素 的 值 为 空 或 0, 则 值 也 会 被 当成 false 处 理 ,导致 遇 到 0 就 会 终止 循环 。 


习 题 7 


一 、 练 习题 
1. 下 列 哪个 PHP 变量 的 名 称 是 错误 的 ? ( 95 

A. $5-zhao B. $s_Name C$ D. $ This 
2. 语句 “echo happy' 1 十 2 .345';” 输 出 结果 为 ( Js 

A. 2345 B. happy3345 C. happy12345 D. 运行 出 错 
3. ?: 运 算 符 相当 于 以 下 哪个 PHP 语句 ? ( ) 

A. if. . .else B. switch .for D. break 


4. 语句 “for( $k 二 0; $k 二 1; $k 十 十 );” 和 语句 “for( $k 二 0; $k 一 一 1; $k 十 十 );” 
的 执行 次 数 分 别 是 ( Ws 
A. 无 限 次 和 0 B. 0 和 无 限 次 C. 都 是 无 限 次 D. 都 是 0 
5. 如 果 要 提前 离开 for 循环 ,可 以 使 用 下 面 哪个 语句 ? ( ) 
A. pause B. return C. exit D. break 
6. 如 果 要 使 程序 的 运行 在 循环 内 跳 过 后 面 的 语句 ,直接 返回 循环 的 开头 ,应 在 循环 
内 使 用 下 面 哪个 语句 ? ( ) 
A. goto B. jump C. continue D. break 
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Ve 
少 ? < 


8. 


和 


10. 


1 


12. 


13. 


14. 


对 于 for( $i 二 100; $i 过 二 200; $i 十 二 3) ,循环 运行 结束 后 ,变量 $i 的 值 是 多 
) 


A. 201 B. 202 C. 199 D. 198 
下 列 哪 一 项 代表 无 穷 循环 ? ( ) 

A. for(;;) B. for() C. foreach(,) D. do(1) 
数组 是 通过 下 列 哪 一 项 来 区 分 它 所 存放 的 元 素 的 ? 〈 》 

A. 长 度 B. 值 C. 索引 D. 维度 
在 默认 情况 下 ,PHP 数组 中 第 一 个 元 素 的 索引 是 ( 9 

A. 0 | C. 空 字 符 串 D. 不 一 定 
PHP 规定 数组 的 索引 可 以 为 以 下 哪 两 种 形式 ? (多 选 )( ) 

A. 布尔 B. 浮 点 型 C. 整数 D. 字符 串 
下 列 哪 一 项 可 以 用 来 访问 数组 的 元 素 ? ( ) 

= B. => [SD DBD; Li 

下 列 哪些 运算 符 可 以 用 来 比较 两 个 数组 是 否 不 相等 ?( ) 

二 B. != C. <> Di = 一 


如 果 数 组 $a=array(0 一 >>5,1 王 >>10),$b=array(1 一 >>15,2 一 之 20), $c= 


$a 十 $b, 则 $c 等 于 下 列 哪 一 项 ? ( ) 


15. 


A. array([0]=>5[1]=>10[2]=>20) 

B. array([0]=>5[1]=>15[2]=>>20) 

C; array(L0]=>5L1|=>[L21]=>20) 

D, array([L0 =>5L1j=>10L2j=>15L31]=>20) 

假设 $a=array(0= 记 @',1 = 之 'b)) ,$b=array(1=='b',0== 之 'a), 则 $a== 








$b 和 $a 二 二 二 $b 的 值 分 别 是 ( )'s 


16; 


A. true true B. true false C. false false D. false true 
假设 $a 二 array('a','b','c','d) , 则 依次 调用 next( $a);next( $a);next( $ a);prev 


($a); 后 ,current( $a) 会 返回 哪 一 项 ? ( ) 


17: 


18. 


8 


20. 


A. a' B: Bb! Co D. 中 

假设 list($x, $y) 二 array(10,20,30,25), 则 $y 的 值 是 ( js 

A. 10 B. 20 C; 30 D. 25 

下 列 哪个 函数 可 以 将 数组 中 的 索引 和 值 互 相交 换 ? ( ) 

A. array_reverse() B. array_walk() C. array_flip() D. array_pad() 
假设 $a 二 array(10,25,30,25,40), 则 array_sum( $a) 会 返回 ( ) 。 

A. array([0]= 这 105) B. array([0]= 这 130) 

C, 105 D. 130 


假设 $a 二 range(1,20,5), 则 print_r( $a) 为 下 列 哪 一 项 ? ( ) 
A. array(1,6,11,16) B. array(1,20,5) 





C. array(5,10,15,20) D. array(5,10,15) 
21. 假设 $a=array('x'y);, 则 $a=array_pad($a,4,'z0)3; ,会 返回 下 列 哪 一 项 ? 
( » 











A. array(x',y', 2', 2") B. array(z','z','2','2') 
C. array('x','x','x','2') D. array('x','y','z',0) 
给 . PHP 是 的 缩写 ,PHP 文件 中 可 包含 .3 三 部 
分 的 代码 。 
23， 当 把 布尔 值 转换 为 整 型 时 ,true 会 转换 成 ,false 转换 成 。 当 把 
布尔 值 转换 成 字符 串 时 ,true 会 转换 成 ,false 转换 成 。 
24. 已 知 $a 王 8, 则 执行 语句 “$b 一 Sa 十 王 10; "后 , $a 的 值 是 ,$b 的 值 
是 
检测 一 个 变量 是 否 设 置 需要 使 用 函数 ,检测 一 个 变量 是 否 为 空 需要 使 用 
函数 。 
25. 对 变量 进行 引用 赋值 时 ,引用 的 变量 名 前 必须 加 
26. 对 于 用 $ arr 二 array (1,2,array('h')) 定 义 的 数组 ,数组 元 素 'h' 的 索引 值 是 
,count( $arr,1) 将 返回 
27.“echo count("abc");” 的 输出 结果 是 。 
28， 对 数组 进行 升序 排序 并 保留 索引 关系 ,应 使 用 的 函数 是 
29. 假设 网 站 目录 为 E: \news, 网 站 的 admin 目录 中 的 sh. php 中 有 包含 语句 
require “iinc/conn. php';”, 则 应 保证 文件 conn. php 位 于 目录 下 ,如果 将 该 文件 
包含 命令 改 成 “require Vinc/yconn. php';”, 则 应 保证 文件 conn. php 位 于 目录 下 。 
30. 假设 要 输出 正确 的 HTML 代码 ,下 列 PHP 代码 中 写法 正确 的 有 : 8 


《1) <ta<?="b" ?>le border="1"> 

(2) <ta<?=b ?>le border="1"> 

(3) <ta<? echo 'b' ?>le border="1"> 

(4) <p align= "<=<?= "right" ?>" 盖 段落 天/p> 
(5) <p align=='<?="right" ?过 窟 段落 过 /p 
(6) <p 二 ?一 "align 一 right" ?二 二 段落 过 /Pp 二 
(7) =p 二 ?一 align 一 "right"' ?这 过 段落 二/p 二 
(8) <? for( $1=1; $1<5; $i 十 十 )9 盖 

(9) <? for( $i=1; $i<5; $i 十 十 ) ?> 

(10) <? for( $i=1;?><? $i<5; $i 十 十 ) ?> 
(11) <% fori=1 to 5 %> 

(12) <?="<table border=1>" ?> 

(13) <font size 一 "所 ? 一 6? 盖 "全 天 二 /font> 
(14) =style>p{ height:=<=?=58?>px;}</style> 
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31. 如 果 要 将 一 个 变量 的 数据 类 型 由 字符 串 型 强制 转换 成 整 型 ,有 哪 几 种 方法 ? 
32. 在 页 面 A 中 定义 的 普通 变量 $b 可 以 在 页 面 B 中 使 用 吗 (页 面 A、B 不 存在 包含 





33. 包含 文件 操作 常用 的 4 种 函数 是 什么 ?各 适合 应 用 于 哪 种 场合 ? 
二 、 编程 题 


1. 编写 PHP 程序 ,计算 1~100 之 间 所 有 偶数 的 总 和 ,然后 把 结果 输出 出 来 。 

2. 编写 程序 ,在 网 页 上 输出 一 个 三 角形 形式 的 九 九 乘法 表 。 

3. 编写 程序 ,使 用 while 循环 计算 4096 是 2 的 几 次 方 ,然后 输出 结果 。 

4. 编写 程序 , 先 声明 一 个 数组 {5, 8,2,3,7,6,9,1,8,4,3,0} ,然后 输出 数组 中 最 大 
元 素 和 最 小 元 素 的 索引 值 。 

5. 先 根据 原理 写 出 下 列 程序 的 运行 结果 ,然后 后 和 证 八 生生 全 生生 


(1) 运 行 结果 为 : (2) 运 和 行 结果 为 : (3) 运 结果 为 ， 

$a= "hello"; $str= "true or false;"; $n=10; $nn= 100; 

Sb= &$a; if(eval ($str)) $a= "Snnn'7 

unset ($b); echo 1; $b= "$nnn"; 

$b= "world"; else $C= $a.$b; 

echo $a; echo 0; echo $c; 

(4) 运行 结果 为 : (5) 运行 结果 为 : (6) 运行 结果 为 : 

$3; $l $c=5; $str= 'Heng yang'; 

while($d> 0) { $d 0; $arr= explode('_',$str); 
$x= ($y+1) * 2; if($c=$d++) Sres= inplode ('', $arr); 
$y= $x; echo $d; echo $res; 
--$d; } ee 

echo $x; echo $c; 


6. ne 结果 。 


(1) 运行 结果 为 : (2) 运行 结果 为 : 
$num 2; $num 107 
finction rultiply() { 


$a 2; $b=1; 


for($i= 1;$i<=$nm$it+){ on 


} 


$s=$st $a /$b; 

Sa multiply()7 
Sa $at Sb) Com 
Sbr $t; } 


echo $s; 
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(3) 运行 结果 为 : (4) 运行 结果 为 : 
fimction fin($a){ fimction rev($var){ 
if($a>1) STes= "7 
$=$a * fin($a—1); for($i=0,$j= strlen ($var) ;$i< $j; 
else $$a; $i++) { 
return $r; S$res= $var[$i] .$res; 
} } 
echo fan(3); retum $res; 
Stmpr "hengyang"; 
S$res= rev($tmp)7 
echo $res; 
(5) 运行 结果 为 : (6) 运行 结果 为 : 
2 $arr=array(l, 1); 
$c= 40; for($i=2;$i< 20;$i++){ 
$a= $b> $c ? ($c -$b) ?1:($b -$c)>0: ($b+ $arr[$i]= $arr[$i- 1]+ $arr[$i- 2]; 
$c) ?0 :$b * $c } 
echo $a; for($i= 0;$i< count ($arr) ;$i+t+){ 
if($arr[$i] $5==0){ 
echo $arr[$i]; 
break; 
} 
} 
(7) 运行 结果 为 : (8) 运行 结果 为 : 
function t ($n) { for($i= 100;$i< 1000;$i+ + ){ 
Sepa Sar intval ($1 /100); 
fr $b= intval ($1 / 10) $10; 
if($j>=4 &&$j< 15) $c=$1 $10; 
we if (pon ($a, 3)+pow ($b, 3)+ 
SC a pow ($c, 3)==$i &&$i %10==0) 
if($j==20) en 
Snumr 一 7 } 
了 
retum Snum7 
} 
echo t (5); 


(9) 运行 结果 为 : 


finction fun($n) { 
if ($m=3) retum 1; 
$t=2 * (fim($nt1)+1); 
retum $t; } 
echo fn(1); 


函数 和 面向 对 象 编程 QQ 


在 软件 项 目 开发 的 工程 实际 中 ,为 了 提高 代码 的 可 重用 性 和 实现 程序 的 模块 化 ,函数 
被 广泛 使 用 。 一 个 函数 代表 一 个 功能 模块 ,这 样 程序 就 由 许多 函数 构成 ,程序 的 执行 就 是 
函数 之 间 的 相互 调用 。 面 向 对 象 编程 是 一 种 高 级 编程 思想 ,面向 对 象 方法 通过 将 程序 中 
的 实体 集 和 实体 分 别 抽象 成 类 和 对 象 ,通过 继承 等 机 制 也 可 以 提高 代码 的 重用 性 。 


8.1 PHP 的 内 置 函数 


PHP 提供 了 大 量 的 内 置 函 数 , 用 于 方便 开发 者 对 字符 串 .数值 .日 期 ,数组 等 各 种 类 
型 的 数据 进行 处 理 。 内 置 函数 无 须 定义 就 可 使 用 ,如 date() 就 是 PHP 的 一 个 内 置 函 数 。 
8.1.1 字符 串 处 理 函 数 

在 PHP 程序 开发 中 对 字符 串 的 操作 非常 频繁 。 如 用 户 在 注册 时 输入 的 用 户 名 、 密 
码 以 及 用 户 留言 等 都 被 当 作 字符 串 来 处 理 。 很 多 时 候 要 对 这 些 字符 串 进行 截取 、 过 滤 、 大 
小 写 转换 等 操作 ,这 时 就 需要 用 到 字符 串 处 理 函 数 。 常 用 的 字符 串 处 理 函 数 如 表 8-1 
所 示 。 

表 8-1 常用 的 字符 串 函 数 及 功能 

函 数 功 能 示 例 
strlen(string) 返回 字符 串 的 长 度 (中 文 算 两 个 字符 ) | strlen("abc8") ,返回 4 
trim(string[ ,s]) 去 掉 字符 串 两 端的 空格 或 指定 字符 trim(”abcdx ") ,返回 "abcd*" 











ltrim ( string )、 i 
(ee) “去掉 字 符 串 左边 或 右边 的 空格 ltrim(" abcd x ") ,返回 "abedx " 
String 





从 字符 串 的 第 start 个 字符 开始 , 取 长 
为 length 的 子 串 。 如 果 省 略 length, 表 |substr("2010-9-6" ,5) ,返回 "9-6" 

substr ( string，start, | 示 取 到 字符 串 的 结尾 ,如 果 start 为 负 | substr("2010-9-6",2,4) ,返回 "10-9" 
[length]) 数 表示 从 末尾 开始 截取 ,如 果 length| substr("2010-9-6" ,2.-2) ,返回 "10-9" 
为 负数 , 则 表示 取 到 倒数 第 length| substr("2010-9-6",-3,3) ,返回 "9-6" 
字符 








函 数 


功 能 


第 8 章 函数 和 面向 对 象 编程 





续 表 
例 


缠 





str replace (find，re- 
place, string, 


[&count]) 


替换 字符 串 中 的 部 分 字符 ,将 find 蔡 
换 为 replace, 如果 有 参数 count, 还 可 
获取 替换 了 多 少 处 


str_replace(" AB"," * "," ABCabc"), 
返回 " * Cabe" 





strtr ( string, find, re- 


place) 


等 量 蔡 换 字符 串 中 的 部 分 字符 ,将 find 
替换 为 replace, 如 果 find 和 replace 长 
度 不 同 , 则 只 替换 两 者 中 的 较 小 者 


strtr(" Hilla Warld","ial","eo"), 返 
回 ”Hello World"(i 替换 成 e,a 换 成 0) 





substr_replace( string, 
replace, start,[ length]) 


从 字符 串 的 第 start 个 字符 开始 ,用 re- 
place 替换 长 度 为 length 的 字符 , 若 省 
略 length, 将 蔡 换 到 结尾 


substr_replace("ABCabc"," x*",3) , 返 
回 "ABCx*" 
substr_replace("ABCabc"," *",3,2) ， 
返回 "ABC x e” 





strtok(string, split) 


根据 split 指定 的 分 隔 符 把 字符 串 分 割 
为 更 小 的 字符 串 


strtok( $ str," ") 





strpos ( string, find, 
[start]) 


返回 子 串 find 在 字符 串 string 中 第 一 
次 出 现 的 位 置 ,如 果 未 找到 该 子 串 , 则 
返回 false, 如 果 有 start 参数 ,表示 开始 
搜索 的 位 置 


strpos("ABCabc", "bec") ,返回 4 
strpos("ABCabc","bc",5) ,返回 false 





strstr(string, search) 


返回 从 search 开始 ,字符 串 的 其 余部 
分 。 如 果 未 找到 所 搜索 的 字符 串 , 则 返 
回 false 


strstr("ABCabc","ab") ,返回 "abc" 





strspn ( string, find, 
[start]) 


返回 字符 串 string 中 包含 find 中 特定 
连续 字符 的 数目 


strspn("babaadabc","abc") ,返回 5 





stremp(strl ,str2) 


返回 两 个 字符 串 比 较 的 结果 。strl 小 
于 str2, 比较 结果 为 一 1; strl 等 于 
str2, 比 较 结果 为 0; strl 大 于 str2, 比 
较 结果 为 1 


stremp ("ABC","abe") ,返回 一 1 
strcmp (〈"abc","abc") ,返回 0 
strcmp ("abc","aa") ,返回 1 











strrev(string) 反 转 字符 串 strrev("Hello") ,返回 "olleH” 
人 ne 把 字符 串 重复 指定 的 次 数 str_repeat(".",6) ,返回 "...... . 
nl2brCstring) 将 string 中 的 \n 转换 为 换行 标记 | alzbr(vaNnb*), 返 回 "a<<br /之 by 


<br/> 





strip_tags (string, [al- 
low]) 


去 除 字符 串 中 的 HTML XML、PHP 
标记 


strip_tags(" Hello <b> world! 
所 /b>") ,返回 "Hello world!" 








、 Ky chr(13) ,返回 回 车 符 
chr(number) 返回 与 指定 ASCII 码 对 应 的 字符 chr(0x52) ,返回 "R" 
ord(string) 返回 字符 串 中 第 一 个 字符 的 值 ord("h") ,返回 104 





strtolower( $ str) 





字符 串 转换 为 小 写 





strtolower('ABc) ,返回 abc 
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提示 : 上 述 字 符 串 函数 都 严格 区 分 大 小 写 。 如 果 和 希望 不 区 分 则 可 使 用 对 应 的 不 区 分 
大 小 写 函 数 ( 一 表示 对 应 关系 ): strpos() 一 stripos() 、strstr() 一 stristr() 、str_replace() 一 
str_ireplace() ,stremp() 一 strcasecmp(), 另 外 strchr() 是 strstr() 的 别名 。 

下 面 介 绍 strpos() 和 str_replace() 函 数 及 其 应 用 实例 。 





1。strpos() 函 数 


strpos() 函数 除了 有 定位 子 串 位 置 的 功能 外 ,还 具有 查找 子 串 的 功能 ,只 要 检测 其 返 
回 值 不 恒 等 于 false 即 可 。 

注意 : 不 能 用 返回 值 是 否 等 于 0 来 判断 ,因为 如 果 特 定子 串 的 位 置 是 第 0 个 字符 ,其 
返回 值 也 为 0。 示例 程序 如 下 。 

例 8.1 对 用 户 输入 的 字符 串 进行 检查 并 过 滤 掉 非 法 字符 。 


英 著 
$Patternstr=" 黄 | 黑 | 走私 | 发 票 | 枪支 | 东突 "; // 定 义 要 过 滤 的 非法 字符 串 集 
$Patterm= explode ("| ", $Pattemstr); // 将 字符 集 分 割 成 数组 
//print r($Pattermn); 
S$inputstr= "黑色 黄色 东突 枪支 弹药 走私 物品 增值 发 票 "> /假设 这 是 用 户 输入 的 字符 串 
for ($i= 0;$i< count ($Pattem) ;$i++) { // 分 别 对 数组 中 每 个 字符 串 进 行 查找 


if (strpos ($inputstr, $Pattem[$i]) !== false) { /如 果 找 到 字符 集中 的 某 个 字符 串 
$outstr= str_replace($Pattem[$i],",$inputstr); /将 该 字符 串 过 滤 掉 
$inputstr= $outstr;} // 让 输入 的 字符 串 等 于 这 次 过 滤 后 的 字符 串 

} 

echo $outstr."<br> "; Bx 


程序 的 输出 结果 为 : 色色 弹药 物品 增值 。 
例 8.2 用 字符 串 函 数 来 判断 E-mail 或 IP 地 址 的 格式 是 否 正 确 , 运 行 结果 如 图 8-1 
所 示 。 


<? $emil= "tangsix@ 163.cam"; 
if(strpos ($email, "@ ") && strpos ($email, ".")&& strpos ($email, "@ ")< strpos 
(Semail, ".")) 
echo "Email 格 式 正 确 <br/>"; 
/判断 下 地 址 是 否 正 确 , 用 到 了 explode 函数 
$IP= "59.51.24.54"7 
S$arr= explode (".", $1P); 
if(cont ($arr)==4) 
echo "TIP 格式 正确 ,IP 前 两 位 为 $arr[0].$arr[l].* .x*"; > 


2. str_replace() 函数 


str_replace( ) 函数 除了 可 蔡 换 字符 串 中 的 字符 外 ,如 果 替 换 后 的 字符 串 为 空 , 则 能 过 
滤 掉 被 替换 字符 串 中 的 某 些 字符 ,示例 程序 如 下 。 
例 8.3 对 查询 关键 词 描 红 加 粗 , 运 行 结果 如 图 8-2 所 示 。 
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<? $content= 必 Wap 标准 网 页 设计 与 AsP)》"; // 假 设 这 是 待 查询 信息 
$find= "网 页 设计 "; // 假 设 这 是 查询 关键 词 
$out= str ireplace ($find,"<b style= 'color:red'> $findc /b> ", $coontent); 
echo $out."<br>"; 2 










E TOT 


文件 中 编辑 EE) 查看 中 > 
地 址 四 ) 图 http:/iocalkestph/ 辐 

EE 
Email 格 式 正 


确 
IP 格 式 正确 ，IP 前 两 位 为 
59. 51 .站 , 村 


ET TO -lo|x 


文件 EE) 编辑 EE) 查看 W) ” 导 
地 址 四 ) 加 http://localhost/php/2/e | 
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图 8-1 例 8.2 的 运行 结果 图 8-2 例 8.3 的 运行 结果 





8.1.2 日 期 和 时 间 函 数 


在 动态 网 站 中 ,经 常 需要 获取 当前 的 日 期 时 间 信息 ,比如 在 论坛 中 要 记录 发 言 的 日 期 


和 时 间 等 ,使 用 PHP 提供 的 日 期 函数 能 方便 地 获取 日 期 时 间 。 


间 。 


1. date() 函 数 


date(string， [stampj) 是 最 常用 的 日 期 时 间 函 数 。 用 来 返回 或 设置 当前 日 期 或 时 


例如 : 

echo date ("Y-m- d"); /输出 2013- 04- 23 
echo date("y 年 m 月 d"); // 输 出 13 年 04 月 23 
echo date ("h:i:s"); // 输 出 10:44:46 


其 中 ,Y、m,d 等 是 date 函数 string 参数 中 的 格式 字符 ,常见 的 格式 字符 如 表 8-2 所 
除了 格式 字符 外 的 字符 都 是 普通 字符 ,它们 将 按 原样 显示 ,如 * 年 "“-” 等 。 


表 8-2 date() 函 数 的 格式 字符 及 其 说 明 















































格式 字符 说 明 格式 字符 说 明 
Y 以 4 位 数 显示 年 H 以 24 小 时 制 显示 小 时 (会 补 0) 
y 以 2 位 数 显示 年 G 以 24 小 时 制 显示 小 时 (不 补 0) 
m 以 2 位 数 显示 月 (会 补 0) h 以 12 小 时 制 显示 小 时 (会 补 0) 
n 以 数字 显示 月 (不 补 0) g 以 12 小 时 制 显 示 小 时 (不 补 0) 
M 以 英文 缩写 显示 月 i 以 2 位 数 显示 分 钟 (会 补 0) 
d 以 2 位 数 显示 日 (会 补 0) s 以 2 位 数 显示 秒 ( 会 补 0) 
i 以 数字 显示 日 (不 补 0) t 显示 该 日 期 所 在 的 月 有 几 天 ,如 31 
w 以 数字 显示 星期 (0 一 6) z 显示 该 日 期 为 一 年 中 的 第 几 天 
D 以 英文 缩写 显示 星期 下 显示 本 地 计算 机 的 时 区 
1 以 英文 全 称 显示 星期 判断 是 否 为 头 年 ,1 表示 是 
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提示 : 

(1) date() 函 数 也 可 带 有 两 个 参数 ,此 时 用 来 设置 时 间 。 第 二 个 参数 必须 是 一 个 时 
间 稚 , 它 将 使 date() 返 回 时 间 蕉 设置 的 时 间 。 例 如 ,date('Y-m-d', 0) 将 返回 1970-01-01。 

(2) PHP 解析 器 默认 采用 格林 尼 治 时 间 , 使 得 调用 时 间 函 数 与 实际 时 间 相 差 8 小 
时 。 为 此 ,需要 设置 PHP 的 时 区 ,打开 php. ini 文 件 , 将 “;date. timezone” 修 改 为 “date. 
timezone 二 PRC” 即 可 。 





2. getdate( ) 函数 


getdate() 函 数 也 能 返回 当前 的 日 期 时 间 , 但 它 会 返回 各 种 时 间 字 段 到 数组 中 。 


例如 : 
<? $today=getdate(); 
print r($today); //$today 是 getdate() 函 数 返 回 的 数组 
echo "today[mon] 月 $today [mday] HH "; /on 和 mday 是 数组 元 素 的 索引 
> 
其 中 ,print_r() 是 用 于 递归 打印 数组 或 对 象 的 语句 ,可 以 将 数组 整体 输出 。 运 行 结 
果 为 ， 


RPRrray([seconds]=> 58 [minutes]=>8 [hours]=>12 [mday]=>26 [wday]=>5 [mon]=>4 [year]=> 2013 [yday] 
=> 115 [weekday]=> Friday [month]=>mpril [0]=> 1366974538) 4 月 26 日 


3. time() 函 数 


time() 函 数 会 返回 当前 时 间 的 时 间 稚 。 所 谓 时 间 惟 , 是 指 从 1970/1/1 日 0:0:0 到 指 
定 日 期 所 经 过 的 秒 数 。 例 如 ,当前 时 间 为 2013-04-28 11:58:17, 则 time() 返 回 的 时 间 戳 
是 1367146697。 因 此 利用 time() 可 对 时 间 进 行 加 减 。 示 例 程序 如 下 ,运行 结果 如 图 8-3 






所 示 。 
<? S$nextWeek=time()+ (7 * 24 * 60 x* 60); / 几 周 =7 天 x 24 小 时 * 6 分 * 6 秒 
echo ' 现 在 是 : '. date('Y-m qd') ."<br>"; 
echo ' 下 一 周 是 : '. date('Y-m-d',$nextWeek); > ET gl 
文件 到 ) 编辑 E) 查寻 ”| 避 
4，mktime( ) 函数 现在 是 ，2014-04-03 ” 当 


下 一 周 是 : 2014-04-10 司 





mktime( ) 函数 会 返回 自行 设置 的 时 间 的 时 间 戳 。 与 
date() 函数 结合 使 用 可 以 对 日 期 进行 加 减 运算 及 验证 。 其 语 
法 如 下 : int mktime( 时 ,分 , 秒 , 月 ,日 ,年 ), 例 如 : 


图 8-3 ”time() 函 数 示 例 


echo date ("Y- m- d",mktime (0,0,0,12, 36,2012)); 


表示 设置 时 间 为 2012 年 12 月 36 日 , 则 mktime() 会 自动 校正 时 间 越 界 , 输 出 结果 为 ， 
2013-01-05。 如 果 要 在 今天 日 期 的 基础 上 加 12 天 ,可 以 使 用 : 


echo date ("Y- m- d",mktime (0,0,0,date (m) ,date (d)+ 12)); 
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2013- 05- 08( 注 : 系统 当前 日 期 为 2013-04 26) 

上 述 代 码 中 省 略 了 年 的 参数 ,因为 mktime() 函数 的 参数 可 以 按照 从 右 至 左 的 顺序 省 
略 ,任何 省 略 的 参数 都 会 被 设置 为 当前 时 间 值 。 

S。 strtotime( ) 函数 

strtotime() 函 数 可 将 日 期 时 间 ( 英 文 格式 ) 解 析 为 时 间 稚 。 其 功能 相当 于 date( ) 函数 


设置 时 间 的 逆 过 程 。date() 函数 ( 带 有 2 个 参数 时 ) 可 以 将 时 间 惟 设置 为 时 间 , 而 
strtotime() 是 将 时 间 解 析 为 时 间 戳 。 


<? echo strtotime ("now"); // 输 出 当前 时 间 的 时 间 戳 ,如 : 1367148939 
echo strtotime ("+ 5 hours"); // 输 出 加 5 小 时 后 的 时 间 蕉 
echo date('Y-m- d',strtotime ("+ 1 week")); 1/ 利用 返回 的 时 间 蕉 设置 时 间 


echo strtotime ("+ 1 week 3 days 7 hours 5 seconds"); > 
可 见 , 使 用 strtotime() 函 数 也 可 用 来 对 时 间 进 行 加 减 。 
6 checkdate( ) 函数 


checkdate( 月 ,日 ,年 ) 函 数 可 判断 参数 指定 的 日 期 是 否 为 有 效 日 期 。 如 果 是 ,就 返回 
true, 否 则 返回 false。 例 如 checkdate(10,3,2014) 返 回 true, 因 为 2014/10/3 日 是 存在 
的 。 而 checkdate(13,3,2012) 返 回 false。checkdate() 经 常用 来 对 用 户 输入 日 期 的 合法 
性 进行 检查 。 
8.1.3 检验 函数 

检验 函数 用 来 检查 变量 是 否定 义 、 是 否 为 空 ,获得 变量 的 数据 类 型 .取消 变量 定义 等 。 

1， isset() 函数 


isset( $ var) 函数 用 来 检查 变量 $ var 是 否定 义 。 该 函数 参数 为 变量 名 ( 带 $ 号 ), 如 
果 变 量 已 经 定义 ,并 且 其 值 不 为 NULL, 则 返回 true, 和 否则 返回 false。 


<? echo isset ($test); // 返 回 false, 输 出 空 字符 串 
$test=null; 
echo isset ($test); // 仍 然 返回 false ”2 


通俗 地 说 ,如 果 有 这 个 变量 , 则 isset( $ var) 返 回 true, 否 则 返回 false。 
2. empty() 函 数 


empty() 函数 用 来 检查 变量 是 否 为 空 。 所 谓 变 量 为 空 , 包 括 两 种 情况 : 一 是 变量 未 定 
义 ; 二 是 变量 的 值 为 ""、0、"0"、NULL、FALSE 以 及 空 数组 或 者 没有 任何 属性 的 对 象 等 。 
例如 : 
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值 。 


<? S$var=0; 


echo erpty ($var); // 变 量 值 为 0, 返 回 1 
echo isset ($var); // 变 量 存在 , 且 值 不 为 mil, 返 回 1 
echo empty($str)7 // 变 量 不 存在 ,返回 1 > 


因此 ,如 果 要 检测 变量 是 否定 义 , 尽 量 用 isset() 方 法 。 





3. unset( ) 函数 


unset( $var) 函数 用 来 取消 变量 var 的 定义 。 该 函数 的 参数 为 变量 名 ,函数 没有 返回 
需 注 意 的 是 ,如 果 在 某 个 自 定义 函数 中 用 unset() 取 消 一 个 全 局 变量 , 则 只 是 局 部 变 


量 被 取消 ,而 在 调用 环境 中 的 变量 仍 将 保持 调用 unset() 之 前 一 样 的 值 。 例 如 : 


<? $foo 'alive'; 


function destroy foo() { 


global$ foo; 
inset ($f00); // 在 函数 中 删除 变量 $foo, 实 际 上 只 是 局 部 变量 被 删除 
3 
destroy foo()7 
echo $foo; // 仍 将 输出 alive 
unset ($bar[1]); /unset 也 能 删除 数组 元 素 


Unset ($foolv$fooc2,Sfoo3)7 // 同 时 删除 多 个 变量 ”2> 
4. gettype( ) 函数 


gettype() 函 数 用 来 返回 变量 或 常量 的 数据 类 型 ,返回 值 包括 integer、 double, string、 


array、object、unknown type 等 。 其 语法 格式 为 : string gettype (mixed var)。 例 如 ; 


<? $foo 'bar'7 


echo gettype ($f00).'<br> '; /| 输出 string 
$bar= array ("aa", 12,true,2.2, "test", 50); 

echo gettype ($bar[1]); /输出 integer 
2> 


虽然 gettype() 函数 可 用 来 获取 数据 类 型 ,但 由 于 gettype() 函 数 在 内 部 进行 了 字符 





串 的 比较 ,所 以 它 的 运行 速度 较 慢 。 建 议 使 用 下 面 介绍 的 var_dump() 函数 和 is_* () 函 
数 来 代替 。 


5. var_dump() 函 数 


var_dump() 函 数 用 来 返回 变量 或 常量 的 数据 类 型 和 值 , 并 将 这 些 信息 输出 。 例 如 . 


<? $e-3.1; Sb= ' 天 涯 9 


var dnp ($a, $b); // 输 出 $a. Sb 的 数据 类 型 和 值 
$c=array(l, '2', array("a", "b", "c")); 
Var dmp ($c); // 输 出 $c 的 数据 类 型 和 值 


> 
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昌 loat(3.1) string(4) "天 涯 " array(3) { [0]=>int(1) [1]=> string(1) "2" [2]=> array(3) { [0]= > string 
( "a" [=> string(l) "b" [2]=> string() "c" } } 


在 调试 程序 时 ,经 常 使 用 该 函数 查看 变量 或 常量 的 值 .数据 类 型 等 信息 。 
6. is_x* () 系 列 函 数 


is_x* () 系 列 函 数 包括 is_string() \is_int() ,is_float() \is_bool is_null() \is_array()、 
is_object() \is_numeric() \is_resource() \is_integer() ,is_long() ,is_real() 等 。 它 们 用 来 
判断 变量 是 否 为 某 种 数据 类 型 。 如 果 是 , 则 返回 true, 和 否则 返回 false。 例 如 ,is_string() 
可 以 判断 变量 是 否 为 字符 串 数 据 类 型 ,is_int() 判 断 变量 是 否 为 整 型 ,而 is_numeric() 判 
断 变量 是 否 为 数字 或 由 数字 组 成 的 字符 串 。 例 如 : 


<? $s3.17 

echo is float ($a); // 返 回 true 

$b= '13307473544"7 //Sb 是 由 数字 组 成 的 字符 串 
echo is numeric ($b)7 // 返 回 true 了 


7. settype( ) 函数 


settype() 函数 可 以 进行 强制 数据 类 型 转换 。 转 换 规则 遵循 表 7-5 的 规定 。 其 语法 格 
式 为 : int settype (string var，string type) ,参数 type 为 下 列 的 类 型 之 一 : integer、 
double string \array 与 object。 例 如 : 


<? $a3.]; 

Settype ($a, integer); /将 变量 Sa 转换 成 整 型 
echo $a; // 输 出 3 

$b= "false"; 

settype ($b, bool); // 将 变量 宙 转 换 成 布尔 型 
echo $b; // 返 回 true > 


8. eval() 函数 


eval() 函数 可 以 动态 执行 函数 内 的 PHP 代码 ,该 函数 的 参数 是 一 个 字符 串 ,evalO 〇 会 
试 着 执行 字符 串 中 的 代码 。 示 例 代码 如 下 : 


<? eval('$a=5+t3;"); // 执 行 赋值 语句 
echo $a; // 输 出 8 
eval (var dump ($a);'); // 和 输出 int(8) > 


虽然 eval() 函 数 非常 好 用 ,但 是 ,eval() 函 数 执行 代码 时 效率 是 十 分 低 的 。 并 且 ,eval() 
容易 产生 安全 性 问题 ,在 获取 表单 中 用 户 输 入 的 数据 时 ,应 过 滤 这 些 数 据 中 的 eval 关键 
词 ,因为 它 允 许 用 户 去 执行 任意 代码 ,这 是 很 危险 的 。 
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8.1.4 数学 函数 


数学 函数 的 参数 和 返回 值 一 般 都 是 数值 型 ,常用 的 数学 函数 如 表 8-3 所 示 。 
表 8-3 常用 的 数学 函数 及 其 功能 


功 能 


例 


示 





round(val[ ,int precision]) 


返回 按 指定 位 数 四 舍 五 人 的 数值 ， 
如 果 省 略 precision, 则 返回 整数 


round(3. 41) ,返回 3 
round(3. 45,1) ,返回 3.5 





ceil(val) 


返回 大 于 并 最 接近 val 的 整数 


ceil(3.45) ,返回 4 





floor( val) 


返回 小 于 并 最 接近 val 的 整数 


floor(3.45) ,返回 3 





intval( val) 


返回 val 的 整数 部 分 


intval(3. 6a) ,返回 3 
intval(3.6) ,返回 3 























abs(num) 返回 num 的 绝对 值 abs( 一 3.43) ,返回 3. 43 
sqrt(num) 返回 数 num 的 平方 根 sqrt(16) ,返回 4 

pow(base,exp) 计算 次 方 值 ,base 为 底 ,exp 为 宪 pow(2,3) ,返回 8 

log(num[ ,base]) 计算 以 e 为 底 的 对 数 log(10) ,返回 2. 3025… 
exp(num) 返回 自然 对 数 e 的 紧 次 方 exp(10) ,返回 22026. … 

rand(int min,int max) “| 返回 min 到 max 之 间 的 伪 随 机 数 “| rand(2,.9) ,返回 2 一 9 之 间 的 整数 
srand(int seed) 播 下 随机 数 发 生 器 种 子 已 被 淘汰 ,不 建议 使 用 





int getrandmax (void) 


返回 调用 rand() 可 能 返回 的 最 大 值 





sin(arg) 等 三 角 函 数 


包括 sin() ,cos() ,tan() 等 


sin(pi()/6) ,返回 0.5 





max (numl，num2，…， 
numn) 


返回 若干 个 参数 中 的 最 大 值 


max(2.3,3.5) ,返回 3.5 





min (numl，num2，…， 


numn) 


返回 若干 个 参数 中 的 最 小 值 


min(2,3,3.5) ,返回 2 





decbin(num) 


十 进 制 数 转换 为 二 进 制 


decbin(6) ,返回 110 














bindec(num) 二 进 制 数 转换 为 十 进 制 bindec(11) ,返回 3 

dechex 十 进 制 数 转换 为 十 六 进 制 dechex(13) ,返回 "d" 

bas (num., from, 

| 在 任意 进 制 之 间 转 换 数字 base_convert("la,16,10) ,返回 "26" 
b f 请 number_format(3. 142,2) ,返回 "3.14" 

nmoer -oa -um*| 格 式 化 数字 字符 串 number_ format (1314. 5205, 3,".", 


preci,[Lpoint],[Lsep]) 








”"”) ,返回 "1 314. 521" 
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8.2 自 定义 函数 及 调用 


除了 直接 调用 PHP 内 置 函 数 完成 某 些 功能 外 ,用 户 还 可 以 自己 设计 函数 ,来 实现 某 
种 特殊 功能 ,这 称 为 自 定义 函数 。 使 用 自 定 义 函 数 包 括 函 数 的 定义 和 函数 的 调用 两 个 


8.2.1 函数 的 定义 


函数 是 一 个 可 重用 的 代码 块 ,用 来 完成 某 个 特定 功能 。 每 当 需 要 反复 执行 一 段 代码 
时 ,可 以 使 用 函数 来 避免 重复 书写 相同 代码 。 不 过 ,函数 的 真正 威力 体现 在 ,函数 就 像 一 
台 机 器 ( 见 图 8-4) ,这 台 “ 机 器 ”可 以 接收 一 些 数 据 作 为 输入 (通过 函数 的 参数 ) ,进行 加 工 
后 再 把 执行 的 “结果 ”输出 (通过 return 语句 )。 函 数 可 以 有 0 到 多 个 参数 ,但 只 能 有 一 个 
输出 。 用 户 设 计 函 数 的 第 一 步 就 是 要 想 清楚 函数 的 输入 和 输出 。 










return 返 














函数 


function 






参数 n 
图 8-4 函数 示意 图 
定义 函数 的 语法 如 下 
function 函数 名 ([ 形 参 1, 形 参 2 …, 形 参 m) { 
函数 体 
[retum 返回 值 ] 


} 


其 中 ,function 是 PHP 定义 函数 的 关键 字 ,函数 名 是 自 定 义 函 数 的 名 称 , 必 须 符合 变 
量 的 命名 规则 。 参 数 是 函数 的 输入 接口 ,函数 通过 参数 接收 “外 部 ”数据 。 函 数 体 是 函数 
的 功能 实现 。return 语句 用 来 返回 函数 的 执行 结果 ,如 果 不 需要 返回 结果 , 则 可 以 没有 
return 语句 。 

下 面 是 一 个 求 两 个 数 和 的 函数 ,该 函数 的 输入 是 两 个 数 ,输出 是 两 数 的 和 。 代 码 
如 下 : 


<? finction sum($arSb){ 


$C= $at $b; 
retum $c; } // 不 要 写成 echo $c; 
echo sum(3,4); // 调 用 函数 人 > 


提示 : 在 函数 体内 一 般 不 要 有 echo 之 类 的 输出 语句 ,因为 大 多 数 时 候 只 是 希望 将 函 
数 返回 的 值 传递 给 其 他 程序 ,而 并 不 需要 输出 到 页 面 上 。 一 个 函数 应 该 是 一 个 单一 功能 
模块 ,而 不 应 该 把 函数 的 特定 功能 与 输出 功能 混在 一 起 。 函 数 输出 应 通过 return 语句 返 
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回 值 实现 。 
8.2.2 函数 的 调用 


要 执行 函数 内 的 代码 ,必须 调用 函数 。 函 数 调用 有 3 种 方式 。 即 函数 调用 语句 .赋值 
语句 和 函数 典 套 调用 。 


1. 函数 调用 语句 

如 果 函 数 没 有 返回 值 (无 论 是 否 有 参数 ) , 则 可 使 用 函数 调用 语句 调用 函数 ,形式 为 ， 
函数 名 ([ 实 参 1, 实 参 2, …, 实 参 0]); 

例如 下 面 两 个 程序 通过 调用 自 定义 的 hello() 函数 ,来 打印 一 行 字符 : 





区 < 
function hello() { function hello ($n, $star) { 
EChO "闪闪 关 关 闪闪 关 关 关 关 尖 关 关 关 关 关 关 关 四 > for($i= 0;$i< $n;$i++) 
} echo $star; 
hello0; ” // 凋 用 无 参 函 数 } 
> hello(8, '&"); // 调 用 有 参 函 数 ”> 


例 8.4 设计 函数 判断 手机 号 码 格式 是 否 正确 。 


<? finction isTel($tel) { 
if(strlen($tel)==1] && is nmeric($tel)) 
echo 呼 机 号 码 格式 正 确 "; 


else 
echo 咯 式 不 正确 ,请 重新 输入 "; } 
isTel ("13388888888") ; // 调 用 有 人参 函数 > 


2. 赋值 语句 调用 函数 
如 果 函 数 有 返回 值 ,通常 使 用 赋值 语句 将 函数 的 返回 值 赋 给 一 个 变量 。 形 式 为 : 
变量 名 = 函数 名 ([ 实 参 1, 实 参 2, …， 实 参 n]); 


使 用 赋值 语句 调用 函数 的 例子 包括 例 8. 5、 例 8.6 和 例 8.7, 注 意 这 些 函 数 都 有 返 
回 值 。 

例 8.5 限制 输出 字符 串 的 长 度 。 

函数 Trimtit() 的 功能 是 : 如 果 输 入 的 字符 串 $ tit 长 度 大 于 指定 的 长 度 $n, 则 返回 
截取 的 指定 长 度 字符 串 并 加 “…”, 如 果 长 度 小 于 等 于 指定 长 度 , 则 返回 原 字 符 串 。 


<? fimction Trimtit ($tit,$n) { // 注 意 函 数 的 输入 为 两 个 类 型 不 同 的 参数 
iffb strlen($tit, 'GB2312')> $n) 
retum rb substr($tit,0,$n,'GB2312')."…"; // 返 回 函数 值 
else 
retum $tit; // 返 回 函 数值 
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S$st= " 咏 空 母 舰 辽宁 舰 2012 年 完成 舰 载 机 着 舰 "; // 测 试 字 符 串 
Sout= Trimtit ($str,14); // 调 用 函数 
echo $out; // 答 出 : 航空 母 舰 辽宁 舰 2012 年 完成 … 

> 

说 明 : 


(1) 函数 的 参数 类 型 可 以 各 不 相同 ,如 上 例 中 的 $ tit 是 字符 串 , 而 $n 是 数值 型 。 

(2) 函数 体 中 只 有 一 条 return 语句 会 被 执行 ,return 语句 以 后 的 函数 代码 将 不 会 被 
执行 。 
(3) mb_strlen() 和 mb_substr() 分 别 是 strlen() 和 substr() 的 中 文字 符 的 版 本 ,这 两 
个 函数 都 必须 带 有 指定 编码 类 型 的 参数 ,如 'GB2312'。 如 果 处 理 的 字符 串 中 有 中 文 ,一定 
要 用 这 两 个 函数 ,因为 substr() 不 仅 会 把 中 文 当成 2 个 字符 ,在 处 理 中 文字 符 时 还 会 产生 
乱码 。 

例 8.6 替换 特殊 字符 为 字符 实体 。 

有 时 用 户 在 表单 中 提交 了 一 段 字 符 串 ,这 段 字 符 串 中 可 能 有 回 车 、 空 格 等 特殊 字符 ， 
由 于 浏览 器 会 忽略 代码 中 的 回 车 .空格 等 字符 ,导致 这 些 格式 丢失 ,因此 有 必要 将 它们 用 
字符 实体 替代 ,使 这 些 格式 在 浏览 器 中 保留 下 来 ,示例 程序 如 下 ,运行 效果 如 图 8-5 所 示 。 


<? 
finction myReplace ($str) { 
$str= str replace("< ", "glt;",$str); // 蔡 换 < 为 字符 实体 sat; 
$str= str replace("> ", "ggt;", $str); /| 替换 > 为 字符 实体 ggt; 
$str= str_replace(chr(13),"<br>",$str);  ”// 蔡 换 回 车 符 为 换行 标记 <br> 
$str= str_replace (chr(32),"gnbsp;",$str); ” // 蔡 换 空格 符 为 字符 实体 snbsp; 
retumn $str; // 返 回 函 数值 
} 
$str= "< font color= 'red'> abc< /font> "; // 测 试 字符 串 
echo $str.'<br> '; 
echo myReplace ($str); > ETTELOrT TE lol x 











提示 : PHP 提供 了 内 置 函 数 htmlentities() 可 以 完 


成 例 8.6 中 myReplace 函数 的 功能 ,但 是 htmlentities() 2 一 一 >abeccjtont》 司 
不 会 将 空格 替换 成 字符 实体 “&nbsp;”。 下 

由 于 函数 的 返回 值 只 能 有 1 个 ,如 果 和 希望 函数 返 
回 多 个 值 ,可 以 让 函数 返回 一 个 数组 。return 语句 返回 数组 的 语法 如 下 ,示例 代码 见 
例 8.7。 


例 8.7 设计 一 个 函数 ,输入 是 一 个 整数 ,输出 是 这 个 整数 各 位 上 的 数字 。 
由 于 本 例 中 函数 的 返回 值 有 多 个 .因此 让 函数 返回 一 个 数组 ,该 数组 保存 了 输入 的 整 
数 各 个 位 上 的 数字 。 
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<? finction aval ($num) { //aval() 用 来 求 $nm 各 位 上 的 数字 
for($i=0;$num> =1;$it++){ 
$arr[$i]= Snum&l07 // 对 10 取 余 得 到 个 位 数 
Snumr Snuy10;  } // 除 以 10 后 十 位 数 变 成 个 位 数 





ITeturn $arr; // 返 回 数组 $arr 
} 
print r(aval (54262)); // 调 用 函数 ,将 返回 各 个 数位 上 的 数字 > 
输出 结果 为 ， 


Array([0]=>2 [1]=>6 [2]=>2 [3]=>4 [4]=>5) 
3。 还 数 的 肉 套 调用 
函数 可 以 艇 套 调用 , 即 把 函数 调用 作为 另 一 函数 的 参数 。 例 如 : 


<? function sum($a, $b){ 
retum $at $b; } 
echo sum(7,sum(3,5)); // 函 数 作为 另 一 函数 的 参数 调用 > 


例 8.8 过 滤 字 符 串 中 的 HTML 标记 。 

有 时 需要 把 文本 中 的 HTML 标记 都 过 滤 掉 ,过 滤 的 思路 是 : 首先 找到 第 1 个 
HTML 标记 的 开始 和 结束 位 置 (“二 ”和 "二 ”) ,将 “到 "左边 的 字符 与 “之 ”右边 的 字符 连接 
在 一 起 ,这 样 就 去 掉 了 第 1 个 HTML 标记 ,再 把 过 滤 后 的 字符 串 赋值 给 原 字符 串 ,进行 
下 次 过 滤 , 直 到 文本 中 找 不 到 HTML 标记 为 止 。 


<? 1/ right 函数 : 截取 字符 串 $s 右 边 的 $n 个 字符 
finction right ($s, $n) { retum $n? substr ($s, — $n): ''; } 
function noHtml ($str) { //no8ML 函数 : 去 除 字符 串 $str 中 的 HEmML 标 记 代 码 
while (strpos ($str, "< ')!==falsel |strpos ($str, "> ')!== false) { 
// 如 果 字 符 串 中 有 "< 哦 >" 


Sbegin= strpos ($str, '< '); // 找 到 "<" 符 的 位 置 
$end= strpos ($str, "> '); // 找 到 省 " 符 的 位 置 
$lengthr strlen ($str)- $end- 1; //>" 啥 右边 的 字符 串 长 度 


/将 汪 只 左 边 的 字符 串 和 光 " 符 右边 的 字符 串 连接 在 一 起 
$filterstr= substr ($str,0, $begin) . right ($str,$length); 
// 在 函数 体内 调用 男 一 函数 
$str= $filterstr; // 把 一 次 过 滤 后 的 字符 串 赋 给 原 字符 串 ,以 便 进行 下 次 过 滤 
} 


retum $str; // 返 回 函 数值 

} 

$str= "< font size= 9 abc< /font> "™; // 测 试 字符 串 
echo ncHtml ($str); /| 输出 结果 为 "abc" 
> 


实际 上 ,PHP 提供 了 内 置 函数 strip_tags() 可 实现 noHtml() 函 数 的 功能 。 
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8.2.3” 传 值 赋值 和 传 地 址 赋值 
函数 的 参数 赋值 有 两 种 方法 , 即 传 值 赋值 和 传 地 址 赋值 。 
1. 传 值 赋 值 


默认 情况 下 ,函数 的 参数 赋值 采用 传 值 赋 值 方 式 ,即将 实 参 值 拷贝 给 形 参 值 。 这 种 赋 
值 方式 是 单 向 的 , 即 实 参 将 值 赋 给 形 参 ,但 调用 结束 后 形 参 不 会 将 值 赋 给 实 参 ,因此 函数 
调用 结束 后 实 参 的 值 不 会 发 生 改变 。 例 如 : 


<? finction adal ($val){ 
$valt +? 
Teturn $val; } 
S$age= 18; 
echo addl ($age) .' '; 
echo addl ($age) .' '; 
echo $age; 


运行 结果 为 

19 19 18 ?> 

上 述 程序 的 执行 过 程 是 : 

(1) 函数 只 有 在 被 调用 时 才 会 执行 。 因 此 ,程序 执行 的 第 一 条 语句 是 * $ age 一 18;”， 
PHP 预 处 理 器 为 $ age 分 配 第 一 个 存储 空间 。 

(2) 执行 语句 echo addl($age).' ,此 时 自 定 义 函 数 addl() 被 调用 ,PHP 预 处 理 器 
为 函数 参数 $ val 分 配 存储 空间 ,将 实 参 值 18 拷贝 给 $ val。 

(3) $ val 进行 加 1 运算 ,使 $ val 的 值 为 19, 但 $age 的 值 仍 为 18。 

(4) 函数 调用 结束 时 ,PHP 预 处 理 器 回收 函数 调用 期 间 分 配 的 所 有 内 存 , 此 时 $ val 
消失 。 

(5) 第 二 次 调用 函数 时 ,又 将 $ age 的 值 拷贝 给 $ val, 因 此 $ val 的 初始 值 仍 为 18。 


2. 传 地 址 赋值 


函数 的 参数 也 可 以 使 用 传 地 址 赋值 ,即将 一 个 变量 的 “引用 ?传递 给 函数 的 参数 。 和 
变量 传 地 址 赋值 一 样 ,在 函数 的 参数 名 前 加 “&.” 就 能 实现 传 地 址 赋值 。 示 例 代码 如 下 : 


<? finction adql (&$val){ 
$valt+;? 
retum $val; } 
$age= 18; 
echo adal ($age) ." '; // 注 意 传 地 址 赋值 时 ,函数 参数 不 能 是 常量 
echo aqal ($age) ." '; 
echo $age; 


运行 结果 为 
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19 20 20 针 芳 


上 述 程序 的 执行 过 程 是 : 

(1) 程序 执行 的 第 一 条 语句 是 ”$ age 二 18;”,PHP 预 处 理 器 为 $ age 分 配 第 一 个 存 
储 空间 。 

(2) 程序 执行 到 “echo add1( $ age).'';”, 此 时 自 定义 函数 addl() 被 调用 ,PHP 预 处 
理 器 为 函数 参数 $ val 分 配 存储 空间 ,由 于 这 里 是 传 地 址 赋值 , 形 参 $ val 和 变量 $ age 都 
指向 同一 个 变量 值 18 的 地 址 。 因 此 $ val 的 值 变 为 18。 

(3) 程序 执行 到 “$ val 十 十 ;” 时 , 形 参 $ val 修改 地 址 中 的 值 为 19, 由 于 变量 $age 也 
指向 该 地 址 ,因此 变量 $ age 的 值 也 变 为 了 19。 

(4) 函数 调用 结束 时 ,PHP 预 处 理 器 回收 函数 调用 期 间 分 配 的 所 有 内 存 ,此 时 $ val 
消失 。 但 函数 外 变量 $ age 的 值 不 会 改变 ,仍然 为 19。 

(5) 第 二 次 调用 时 , $ val 又 会 修改 $age 指向 地 址 中 的 值 ,使 $ age 的 值 变 为 20。 

可 见 , 使 用 传 值 赋值 的 方式 为 函数 参数 赋值 ,函数 无 法 修改 函数 体外 的 变量 值 ; 若 使 
用 传 地 址 的 方法 为 函数 参数 赋值 , 则 函数 可 以 修改 函数 体外 的 变量 值 。 

但 无 论 使 用 哪 种 赋值 方式 ,函数 参数 (或 函数 体内 变量 ) 的 生存 周期 是 函数 运行 期 间 ， 
若 要 延长 函数 体内 变量 的 生存 期 , 需 使 用 static 关键 字 ; 函数 参数 (或 函数 体内 变量 ) 的 作 
用 域 是 函数 体内 有 效 , 若 要 扩大 函数 体内 变量 的 作用 域 , 需 使 用 global 关键 字 。 


8.3 面向 对 象 编程 


面向 对 象 编程 (Object Oriented Programming,OOP) 是 一 种 编程 思想 ,目前 在 大 型 应 
用 软件 开发 中 应 用 非常 广泛 。 

面向 对 象 的 程序 由 对 象 (object) 构 成 。 把 所 有 的 对 象 都 划分 成 类 (class) ,每 个 类 定 
义 了 一 组 静态 的 属性 和 动态 的 方法 。 对 象 之 间 通 过 传递 消息 互相 联系 ,驱动 整个 系统 来 
运转 。 类 是 具有 相同 或 相似 的 结构 .操作 与 约束 关系 的 对 象 组 成 的 集合 。 对 象 是 对 某 个 
类 的 具体 化 实例 ,每 个 类 都 是 具有 某 些 共同 特征 对 象 的 抽象 。 


8.3.1 类 和 对 和 象 


在 现实 中 ,任何 一 个 具体 事物 都 可 以 看 作 一 个 对 象 ,例如 一 个 人 一 辆 汽车 ,一 场 电 影 
等 都 是 对 象 。 对 象 包含 属性 和 方法 。 将 张 三 这 个 人 看 作对 象 , 则 该 对 象 具有 下 列 属性 和 
方法 。 

对 象 : 张 三 { 

属性 : 姓名 .性 别 、 身 高 .体重 年龄 等 ; 
方法 :吃饭 、 走 路 .说话 等 ; 

} 


对 于 对 象 的 属性 ,我 们 可 以 用 变量 来 描述 ,例如 , $age 王 33 表示 张 三 的 年 龄 是 33 
岁 。 对 于 对 象 的 方法 , 则 可 以 用 函数 来 定义 ,例如 ,function walk(){…} 用 来 描述 走路 。 
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由 于 现实 中 很 多 对 象 都 属于 同一 类 ,因此 还 可 以 把 同一 类 的 对 象 看 成 一 个 类 ,例如 ， 
所 有 的 人 都 属于 人 ”类 。 对 象 可 看 成 是 类 的 一 个 实例 ,例如 , 张 三 是 * 人 ”类 的 一 个 实例 。 
因此 定义 对 象 前 都 要 先 定义 类 。 
1. 类 的 定义 
在 PHP 中 ,使 用 class 关键 字 可 以 定义 一 个 类 。 语 法 格式 为 ， 
class 类 名 
定义 成 员 变 量 
定义 成 员 函 数 
} 
可 见 , 类 实际 上 就 是 一 组 静态 属性 和 动态 方法 的 集合 ,将 它们 封装 在 一 起 就 形成 了 一 
个 类 。 例 如 ,要 定义 一 个 类 Mystr, 代 码 如 下 : 
<? class Mystr{ /定义 Mystr 类 ,注意 类 名 后 面 没有 小 括号 
Var $str; 


finction cutput (){ 
echo 'Hello PHP'; } 





| 


说 明 : 在 类 定义 中 ,使 用 关键 字 var 来 定义 成 员 变 量 。 在 定义 成 员 变量 时 ,也 可 直接 
对 它 赋值 。 

类 成 员 变 量 又 可 分 为 两 种 : 一 种 是 公有 变量 ,用 关键 字 public 或 var 定义 ; 另 一 种 是 
私有 变量 ,用 关键 字 private 定义 。 公 有 变量 可 以 在 类 的 外 部 被 访问 , 它 是 类 与 其 他 类 或 
用 户 交流 的 接口 。 用 户 可 通过 公有 变量 向 类 中 传递 数据 ,也 可 以 通过 公有 变量 获取 类 中 
的 数据 。 私 有 变量 在 类 的 外 部 无 法 访问 ,以 保证 类 的 设计 思想 和 内 部 结构 并 不 完全 对 外 
公开 ,这 就 是 面向 对 象 中 的 封装 性 。 

下 面 是 定义 公有 变量 和 私有 变量 的 例子 (8-1. php) 。 


class userInfo{ 
Public $userName; 
private $pwd; 
function output () { 
echo $this- >userName; } 
} 
在 类 userInfo 中 ,使 用 公有 变量 来 保存 用 户 名 ,使 用 私有 变量 来 保存 用 户 密 码 。 
说 明 : 
(1) 类 一 旦 定义 后 .系统 会 自动 为 其 创建 一 个 $ this 的 伪 变 量 , 代 表 类 自身 。 
(2) 如 果 类 的 成 员 函 数 中 要 访问 类 中 的 变量 或 其 他 函数 ,必须 使 用 “ $ this- 二 变量 
名 ?或 “ $this- 二 函数 名 ?访问 。 例 如 ,$this- 二 userName。 不 能 简单 使 用 $ userName 来 
访问 ,也 不 能 写成 $this-> $ userName, 更 不 能 写成 userInfo- 之 userName。 
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(3) 如 果 要 在 类 外 面 访问 类 中 定义 的 变量 和 方法 ,必须 先 创建 该 类 的 对 象 ,然后 用 
“对 象 名 -二 变量 名 ”或 “对 象 名 -二 方法 名 ”来 访问 。 

(4)“- 二 ”是 PHP 中 的 成 员 选 择 运算 符 。 该 运算 符 表示 右边 的 变量 或 函数 隶属 于 左 
边 的 类 或 对 象 。 

注意 : 区 分 “- 之 ”和 "一 盖 ”,“ 一 二 ”是 初始 化 数组 元 素 时 分 隔 " 键 和" 值 ”的 符号 。 





2. 构造 函数 和 析 构 函数 


在 定义 类 时 可 以 在 类 中 定义 一 个 特殊 的 函数 构造 函数 ,用 来 执行 一 些 初始 化 的 
任务 ,比如 对 属性 赋 初 值 等 。PHP 规定 构造 函数 的 名 称 必须 为 *__construct”。 
例如 ,在 userInfo 类 中 定义 一 个 构造 函数 (8-2. php) 。 





class userInfo{ 
Public $userName; 
private $pwd; 
fanction ”construct (){ /定义 构造 函数 
$this->userName= 'Admin'; 。 // 为 类 中 的 变量 赋 初 值 
$this- >pwd '123'; 
} 
fanction output () { 
echo $this- > userName; } 
} 
说 明 : 
(1) 构造 函数 名 ”_construct? 是 以 两 个 下 划 线 开头 。 
(2) 构造 函数 不 能 被 主动 调用 ,例如 "对 象 名 -之 _construct()" 是 错误 的 。 只 有 在 使 
用 关键 字 new 创建 对 象 时 ,系统 才 会 自动 调用 构造 函数 。 
与 构造 函数 相对 应 的 是 析 构 函数 , 析 构 函数 会 在 某 个 对 象 的 所 有 引用 被 删除 或 者 对 
象 被 销毁 时 执行 。 也 就 是 说 ,如 果 定 义 了 析 构 函数 , 则 对 象 在 销毁 前 会 调用 析 构 函数 。 
PHP 规定 析 构 函数 的 名 称 为 “~__destruct()”, 析 构 函 数 不 能 带 有 任何 参数 。 


3. 定义 对 象 
对 象 是 类 的 实例 ,可 以 使 用 new 关键 字 来 创建 对 象 。 定 义 一 个 类 userInfo 的 对 象 
$ user 的 代码 如 下 : 


$user= new UserInfo ()7 


则 $ user 就 是 一 个 对 象 (类 型 为 object 的 变量 ) ,定义 了 对 象 后 ,就 可 使 用 对 象 来 访问 类 
中 的 成 员 变量 或 成 员 方法 。 例 如 : 

$user= new UserInfo ()7 

echo Suser- > userName; // 访 问 类 中 的 变量 

Suser > output (7 // 访 问 类 中 的 函数 
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注意 : 

(1) 如 果 类 中 的 构造 函数 包含 参数 , 则 在 创建 对 象 时 ,也 需要 提供 相应 的 参数 。 

(2) 对 象 只 能 访问 类 中 的 公有 变量 和 函数 ,如 果 试 图 访问 类 中 的 私有 变量 或 函数 ,如 
echo $ user- 二 pwd, 则 程序 会 出 错 , 提 示 不 能 访问 私有 属性 。 

下 面 是 一 个 定义 类 和 对 象 的 综合 实例 (8-3. php) 。 


<? class Person{ 


Var Snamey // 人 的 名 字 

Var $sex; // 人 的 性 别 

Var $age; // 人 的 年 龄 

function say ($word) // 人 有 说 话 的 方法 
{echo $this- >name.' 对 你 说 :'.$word;} 

function run ($step) // 人 有 走路 的 方法 


{edho "<br> 然 后 走 了 ".$step." 步 ";} 
} 
$pl= new Person(); // 创 建 类 person 的 对 象 $pl 
Spl- > name= 号 三 "; // 设 置 对 象 的 属性 ,形式 为 “对 象 名 -> 属性 名 ” 
$pl->say ("您 好 '); // 访 问 对 象 的 方法 ,形式 为 "对 象 名 -> 方法 名 ” 
$pl- > rn(5); 
2> 


输出 结果 为 : 
张 三 对 你 说 : 您 好 
然后 走 了 5 步 
4. 操作 符 ”::” 
相 比 伪 变 量 $ this 只 能 在 类 的 内 部 使 用 ,操作 符 "::” 更 加 强大 。 它 可 以 在 没有 声明 


对 象 的 情况 下 直接 访问 类 中 的 变量 或 方法 。 例 如 ,下 面 的 代码 可 在 类 外 访问 Person 类 的 
方法 。 


Person: :run(8)7 /将 其 放 在 FErson 类 代码 的 外 部 ,将 输出 "然后 走 了 8 步 " 

操作 符 “::” 可 用 于 访问 静态 变量 .静态 方法 和 常量 ,还 可 用 于 覆盖 类 中 的 成 员 变量 和 
方法 。 其 语法 格式 为 : 

关键 字 :: 变量 名 /方法 名 /常量 名 

其 中 关键 字 可 以 分 为 以 下 三 种 情况 。 

。 类 名 : 用 来 调用 本 类 中 的 变量 .常量 和 方法 。 

。 self: 用 来 调用 当前 类 中 的 静态 成 员 和 常量 。 

。 parent: 用 来 调用 父 类 中 的 变量 、 常 量 和 方法 。 


5，instanceof 关键 字 


instanceof 关键 字 用 来 检测 某 个 对 象 是 否 属于 某 个 类 , 它 返回 一 个 布尔 值 。 例 如 ， 
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echo $pl instanceof Person // 返 回 true 


8.3.2 类 的 继承 和 多 态 


面向 对 象 的 三 个 基本 特性 是 : 封装 、 继 承 和 多 态 。 封 装 是 指 把 客观 事物 的 属性 和 方 
法 封装 在 一 起 ,形成 抽象 的 类 。 继 承 和 多 态 的 概念 如 下 。 





1. 继承 


继承 是 指 子 类 可 以 继承 一 个 或 多 个 父 类 的 属性 和 方法 ,并 可 以 重 写 或 添加 新 的 属性 
或 方法 。 通 过 对 已 有 类 的 继承 ,可 以 逐步 扩充 类 的 功能 。 继 承 的 这 些 特 性 简化 了 对 象 和 
类 的 创建 ,增加 了 代码 的 可 重用 性 。 

例如 ,要 设计 三 个 类 :“ 动 物 ” 类 “人 ”类 和 “学生” 类 , 则 可 以 先 定 义 动物 类 ,将 动物 类 
作为 父 类 ,人 类 作为 子 类 ,通过 继承 动物 类 的 一 些 属性 和 方法 就 可 以 简化 人 类 的 设计 ,并 
可 以 添加 入 类 的 新 属性 和 方法 (比如 国籍 、 说 话 等 )。 同 样 地 ,学 生 类 又 可 看 成 是 人 类 的 
子 类 。 

在 PHP 中 ,用 extends 关键 字 可 实现 类 的 继承 。 语 法 格式 为 : 

class 于 类 名 extends 父 类 名 

( 定义 子 类 的 成 员 变量 

定义 子 类 的 成 员 函 数 

} 

提示 : PHP 不 支持 多 重 继承 , 即 一 个 子 类 不 能 有 多 个 父 类 。 

下 面 创建 了 一 个 类 Students, 并 使 它 继 承 于 类 Person, 代 码 如 下 (8-4. php): 


必 训 
class Person{ // 定 义 父 类 
finction _ construct ($name, $sex) { // 定 义 构造 函数 
$this- > name= $name; 
$this- > sex— $sex; 
} 
function say(){ /定义 说 话 的 方法 
echo 我 叫 : '.$this- >namey 
echo ' 性 别 : '.$this- > sex.'<br> '; 
3 
} 


class Students extends Person{ // 定 义 子 类 并 继承 父 类 
Public $school; 
functicn study ($scholl) { // 定 义 上 学 的 方法 


echo 我 在 '.$schol1.'" 上 学 池 
i 
} 
$student=new Students ("小 新 ',' 男 '); // 创 建 一 个 子 类 的 对 象 
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$student— > say(); // 调 用 父 类 的 方法 
S$student- > study(' 石 鼓 书院 '); // 调 用 子 类 的 方法 
> 


运行 程序 ,输出 结果 为 : 

我 叫 : 小 新 性 别 : 男 

我 在 石 鼓 书 院 上 学 

说 明 : 程序 中 子 类 Students 通过 继承 父 类 Person, 调 用 了 父 类 中 的 方法 和 属性 ,如 
显 式 调 用 了 父 类 中 的 say() 方 法 ,通过 创建 对 象 隐 式 调用 了 父 类 中 的 构造 方法 。 同 时 子 
类 也 可 调用 自己 定义 的 方法 study() 。 


2. 多 态 


多 态 好 比 请 大 家 吃 某 种 食物 ,有 的 人 可 能 用 筷子 吃 ,有 的 人 可 能 用 勺子 吃 ,还 有 的 人 
用 又 子 和 勺子 一 起 吃 。 虽 然 是 同一 种 方法 ,但 调用 时 却 产 生 了 不 同 的 形态 ,这 就 是 多 态 。 

在 面向 对 象 中 ,多 态 指 多 个 函数 使 用 同一 个 名 字 , 但 参数 个 数 、 参 数 数据 类 型 不 同 。 
调用 时 ,虽然 方法 名 相同 ,但 会 根据 参数 个 数 或 者 类 型 自动 调用 对 应 的 函数 。 

多 态 可 通过 继承 或 接口 来 实现 。 下 面 是 一 个 通过 继承 实现 多 态 的 例子 (8-5. php) 。 


<? 


class Person{ // 定 义 父 类 
function _ construct ($name, $sex) { // 定 义 构造 函数 
$this- >name= $name; 
$this- > sex= $sex; 
} 
} 
class Students extends Person{ // 定 义 Person 的 子 类 students 
Piblic $school; 
finction study() { // 定 义 上 学 的 方法 


echo 我 在 上 学 <br> 9 } 

} 
class dxs extends Students{ // 定 义 Students 的 子 类 dxs 
finction study(){ // 定 义 上 学 的 方法 

echo $this- >name.' 在 读 大 学 <br> '; } 
} 
class xxs extends Students{ // 定 义 Sbudents 的 子 类 xxs 
fanction study() { // 定 义 上 学 的 方法 

echo $this->name.' 在 念 小 学 <br> '; } 
} 


function rightstudy ($cbj) { // 定 义 函数 ,该 函数 不 属于 任何 类 
if ($0bj instanceof students) // 如 果 该 对 象 是 sbadents 的 实例 
S$aoj- > study(); // 调 用 该 对 象 的 sbudy() 方 法 


else echo ' 出 现 错误 Kbr> 
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} 

$sl=new dxs(" 小 新 ',' 男 '); // 创 建 dxs 类 的 对 象 $sl 

rightstudy ($s1); 

$s2=new xxs ("小花 '' 女 '); // 创 建 ws 类 的 对 象 $s2 

rightstudy ($s2); 

$s3=new Students ("小 文 ',' 女 中 ; // 创 建 students 类 的 对 象 $s3 

rightstudy ($s3); 

> 

运行 程序 ,输出 结果 为 : 

小 新 在 读 大 学 

小 花 在 念 小 学 

我 在 上 学 

说 明 : 程序 通过 继承 Students 类 创建 了 两 个 子 类 : dxs 和 xxs。 在 两 个 子 类 及 父 类 
中 都 定义 了 study() 方 法 。 通 过 instanceof 检测 对 象 类 型 ,这样 无 论 增加 多 少 种 Students 
类 的 子 类 ,都 能 调用 到 正确 的 方法 ,并 且 不 需要 对 rightstudy() 函 数 进行 修改 。 

多 态 使 我 们 将 编程 的 重点 放 在 接口 和 父 类 上 ,而 不 必 考 虑 对 象 具体 属于 哪个 类 的 
问题 。 

虽然 不 使 用 多 态 ,而 使 用 条 件 判断 语句 判断 参数 的 个 数 或 类 型 也 能 使 调用 函数 时 自 
动 调用 相应 的 函数 ,但 那样 就 不 得 不 在 函数 中 多 写 很 多 条 件 语句 来 判断 ,并 且 使 不 同 的 功 
能 都 集中 到 一 个 函数 中 了 。 





习 题 8 
一 、 练 习题 
1. 如 果 函 数 带 有 多 个 参数 , 则 参数 之 间 必 须 用 以 下 哪个 符号 分 开 ? ( ) 
A. ， B. : C 区 Ds 
2. 如 果 要 从 函数 返回 值 ,必须 使 用 下 列 哪 个 关键 词 ?( ) 
A. continue B. break C. exit D. return 


3. 下 列 关于 函数 的 说 法 , 哪 一 项 是 错误 的 ? (  ) 
A. 函数 具有 重复 使 用 性 
B. 函数 名 的 命名 规则 和 变量 命名 规则 相同 ,必须 以 $ 作为 函数 名 的 开头 
C. 函数 可 以 没有 输入 和 输出 
D. 如 果 把 函数 定义 写 在 条 件 语 句 中 ,那么 必须 当 条 件 表达 式 成 立时 ,才能 调用 该 


函数 
4. 如 果 要 在 函数 内 定义 函数 外 也 可 访问 的 变量 ,必须 使 用 下 列 哪个 关键 词 ?( 
A. public B. var C. static D. global 


5. 如 果 想 保留 函数 内 局 部 变量 的 值 ,必须 使 用 下 列 哪个 关键 词 ?( ) 
A. private B. var C, static D. global 


20. 
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. 下 列 哪个 函数 可 用 来 取得 四 舍 五 人 的 值 ? 〈 ) 


A. ceil B. floor C. round D. abs 
. 下 列 哪个 函数 可 以 用 来 取得 次 方 值 ? 〈 ) 

A. sqrt B. pow C. exp D. rand 
. 下 列 哪个 函数 可 以 用 来 取得 当前 的 时 间 信 息 ? ( ) 

A. getdate B. gettime C. mktime D. time 
. 下 列 哪个 函数 可 以 将 字符 串 逆序 排列 ? ( ) 

A. chr B. ord C. strstr D. strrev 
. 下列 哪 个 函数 可 以 将 数组 中 各 个 元 素 连 接 成 字符 串 ? ( y 


A. implode B. explode C. str_repeat D. str_pad 


.下列 哪个 函数 可 以 将 换行 符 转 换 成 HTML 换行 标记 ? ( ) 


A. nl2br B. substr C. strcmp D. strlen 


. 下 列 哪个 运算 符 可 以 用 来 访问 对 象 的 成 员 ? ( ) 


A. :: B; 三 之 oh 了 , 


. 下 列 哪个 运算 符 可 以 直接 访问 类 内 的 方法 或 常量 ,而 无 须 创 建 对 象 ? ( ) 


A. :: B: => 人 二 次 Ds 


.下列 哪个 语句 可 以 在 子 类 调用 父 类 的 构造 函数 ?( ) 


A. base::__construct() B. this: :construct() 


C. parent::__destruct() D. parent::__construct() 


. 关于 构造 函数 的 说 法 ,下 列 哪 一 项 是 错误 的 ? ( ) 


A. 使 用 new 创建 对 象 时 会 自动 运行 构造 函数 
B. 名 称 只 能 为 __construct 

C. 子 类 会 继承 父 类 的 构造 函数 

D. 不 可 以 有 参数 


.如 果 一 个 对 象 的 实例 要 调用 该 对 象 自身 的 方法 函数 mymeth, 则 应 使 用 ( Ys 
A. $self->mymeth() B. $this->mymeth() 
C. $current->mymeth() D. $ this::mymeth() 


. 如果 类 中 的 成 员 声 明 时 没有 使 用 限定 字符 , 则 成 员 属 性 的 默认 值 是 (  )。 


A. private B. protected C. public D. final 


. 在 类 中 定义 的 析 构 方法 是 在 什么 时 候 被 调用 的 ? ( ) 


A. 类 创建 时 B. 创建 对 象 时 C. 删除 对 象 时 D. 不 会 自动 调用 


. PHP 中 调用 类 文件 中 的 this 表示 ( ) 。 
A. 用 本 类 生成 的 对 象 变量 B. 本 页 面 
C. 本 方法 D. 本 变量 


下 列 关 于 类 的 说 法 , 哪 项 是 错误 的 ?( ) 

A. 父 类 的 构造 函数 与 析 构 函数 不 会 被 自动 调用 

B. 成 员 变量 需要 用 public protected private 修饰 ,在 定义 变量 时 不 再 需要 var 
关键 字 
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C. 父 类 中 定义 的 静态 成 员 ,不 可 以 在 子 类 中 直接 调用 
D. 包含 抽象 方法 的 类 必须 为 抽象 类 ,抽象 类 不 能 被 实例 化 
21. 若 要 显示 “xxxx 人 年 xx 月 xx 日 星期 x xx: xx: xx”, 应 设置 date() 函 数 的 参数 














为 

22. substr(“abcdef“, 1,3) 的 返回 值 是 ,substr (“abcdef',-2) 的 返回 值 
是 有 

23. 如 果 字 符 串 $a 二 "test", $b 二 "es", 对 $a 进行 处 理 得 到 $b 的 方法 
是 

24. 函数 strpos("xxPPppXXpx","pp") 的 返回 值 是 

25. 要 截取 中 文字 符 串 ,并且 不 产生 乱码 ,应 使 用 的 函数 是 


26. 变量 $ this 指 的 是 对 象 本 身 , 对 不 对 ? 
27. PHP 允许 父 类 有 多 个 子 类 ,也 允许 子 类 有 多 个 父 类 ,对 不 对 ? 


二 、 编 程 题 


1. 用 PHP 输出 前 一 天 的 时 间 ,要 求 格式 为 2006-5-10 22:10:11。 

2. 编写 一 个 实现 字符 串 反 转 的 函数 。 

3. 编写 一 个 函数 ,使 用 字符 串 处 理 函 数 获得 文件 的 扩展 名 ,如 输入 ab. jpg, 输 出 jpg。 

4. 编写 一 个 函数 ,输入 是 一 个 小 于 8 位 的 任意 位 数 的 整数 ,输出 是 这 个 整数 各 个 位 
上 的 数 。 要 求 分 别 用 两 种 方式 实现 : 

(1) 直接 在 函数 内 部 用 echo 语句 输出 ,函数 没有 返回 值 ; 

(2) 用 字符 串 处 理 函数 截取 该 整数 各 位 上 的 数 。 函 数 的 返回 值 是 一 个 数组 ,数组 中 
各 元 素 保 存 了 各 个 位 上 的 数 。 

5. 编写 一 个 可 计算 某 整数 四 次 方 的 函数 ,该 函数 的 输入 是 一 个 整数 ,输出 是 该 数 的 
四 次 方 。 调 用 该 函数 计算 16 的 四 次 方 , 并 输出 结果 。 

6. 编写 一 个 用 来 判断 某 整 数 是 否 是 质数 的 函数 ,该 函数 的 输入 是 一 个 整数 ,如 果 该 
整数 是 质数 ,就 返回 true, 和 否则 返回 false, 然 后 调用 这 个 函数 输出 2 一 100 之 间 所 有 的 
质数 。 

7. 任意 输入 一 个 整数 ,使 用 函数 的 方法 判断 该 数 是 否 为 偶数 。 

8. 编写 一 个 函数 ,实现 以 下 功能 ,将 字符 串 "cute_boy" 转 换 成 "CuteBoy", 将 "how_ 
are_you" 转 换 成 "HowAreYou"。 

9. 编写 一 个 函数 ,输入 是 5 个 分 数 ,输出 是 去 掉 一 个 最 高 分 和 一 个 最 低 分 后 的 平 
均 分 。 

10. 将 8.1.1 节 中 的 例 8. 1 改写 成 函数 , 即 输入 是 待 过 滤 的 字符 串 和 非法 字符 集 , 输 
出 是 过 滤 后 的 字符 串 ,并 调用 该 函数 实现 例 8. 1 的 功能 。 

11. 编写 函数 ,计算 两 个 文件 的 相对 路 径 ( 例 如 ,“ $a 二 /a/b/c/d/e. php'; $b=Va/ 
b/12/34/c. php';”, 则 计算 出 $b 相对 于 $a 的 相对 路 径 应 该 是 ../../c/d)。 





Web 交 互 编程 4 


Web 应 用 程序 的 基本 功能 就 是 与 用 户 进行 交互 ,获取 并 处 理 用 户 提 交 的 数据 。 用 户 
提交 数据 的 方法 有 : 

(1) 通过 表单 提交 ,如 用 户 注册 、 用 户 登 录 、 留 言 等 都 是 通过 表单 提交 信息 。 

(2) 使 用 网 址 中 的 URL 参数 发 送 数据 给 服务 器 。 这 些 数据 都 是 以 HTTP 请 求 的 方 
式 发 送 。Web 服务 器 必须 能 够 获取 用 户 通过 浏览 器 发 送 来 的 数据 ,才能 与 用 户 进行 
交互 。 


9.1 接收 浏览 器 数据 


浏览 器 可 以 通过 表单 或 URL 字符 串 向 服务 器 发 送 数据 ,这 些 数据 称 为 HTTP 请 求 
信息 。PHP 提供 了 很 多 预定 义 的 超 全 局 变量 ,如 表 9-1 所 示 , 用 来 获取 HTTP 请 求 信 息 ， 
这 些 超 全 局 变量 的 数据 类 型 均 为 数组 。 

表 9-1 PHP 的 超 全 局 变量 及 功能 


























超 全 局 变量 功 能 
$_POST 获取 客户 端 以 POST 方式 发 送 的 HTTP 请 求 信息 
$_GET 获取 客户 端 以 GET 方式 发 送 的 HTTP 请 求 信息 
$_REQUEST 包含 了 $$_GET、$_POST 和 $_COOKIE 三 类 数组 中 的 信息 
$_SERVER 获取 HTTP 请 求 中 的 环境 变量 信息 
$_SESSION 存储 和 读 取 为 单个 用 户 保存 的 信息 
$_COOKIE 读 取 用 户 的 Cookie 信息 
$_FILE 获取 通过 POST 方式 上 传 文件 时 的 相关 信息 ,为 多 维 数组 
$_ENV 获取 服务 器 名 称 或 系统 shell 等 与 服务 器 相关 的 信息 





说 明 : 所 谓 超 全 局 变量 ,表示 该 变量 在 一 个 文件 的 所 有 区 域 中 都 可 使 用 ,包括 自 定义 
函数 内 部 。 


9.1.1 使 用 $_POST[] 获 取 表 单数 据 
用 户 在 表单 中 输入 数据 后 ,可 以 单 击 "提交 ”按钮 ,将 数据 提交 给 服务 器 ,由 在 服务 器 
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端 工作 的 PHP 程序 接收 和 处 理 这 些 表单 数据 。 

表单 提交 数据 的 方式 分 为 GET 和 POST 两 种 ,在 定义 表单 时 ,将 method 属性 设置 
为 GET 或 不 设置 时 ,都 会 采用 GET 方式 提交 ;将 method 属性 设置 为 POST 时 , 则 会 采 
用 POST 方式 提交 。 

使 用 GET 方式 提交 数据 时 ,表单 数据 将 通过 URL 参数 的 形式 发 送 给 服务 器 ,而 使 
用 POST 方式 时 ,数据 不 会 出 现在 URL 参数 中 。 

在 PHP 中 ,$_POST 数组 用 来 获取 使 用 POST 方式 提交 的 表单 数据 ,语法 如 下 : 

变量 名 =$_PosT[" 表 单元 素 name 属 性 值 "] 
表示 将 获取 的 某 个 表单 元 素 值 (如 一 个 文本 框 中 的 内 容 ) 保 存 到 一 个 服务 器 端 变量 中 。 例 
如 ,$user 三 $_POST["user"], 其 中 . $user 是 自 定义 的 一 个 变量 名 称 , 而 后 面 的 user 
则 是 一 个 表单 元 素 的 名 称 (name 属性 值 ) ,两 者 不 是 一 回 事 。 

在 实际 应 用 中 ,表单 的 HTML 代码 和 获取 表单 数据 的 PHP 程序 既 可 以 分 别 写 在 两 
个 文件 中 ,也 可 以 写 在 同一 个 文件 中 。 下 面 分 别 来 讲述 。 





1. 使 用 两 个 网 页 文件 


下 面 的 例子 用 来 获取 用 户 登录 时 输入 的 用 户 名 和 密码 。 它 使 用 了 两 张 网 页 ,其 中 
9-1. php 用 来 显示 表单 ,是 一 个 纯 HTML 页 面 ,9-2. php 用 来 接收 并 输出 获取 的 表单 
数据 。 


<html> <body> 
< fom method= "post" action= "9- 2.php"> 
用 户 名 : < input type= "text" name= "userName" size= "12"> 
密码 : < input type= "text" name= "PS" size= "10"> 
< input type= "submit" value= "登录 > 


<html> <body> 
<? $userName=$ POST["userName"]; 
$PS=$_ POST["PS"]; 
echo "您 输入 的 用 户 名 是 :".$userName; 
echo "<br> 您 输入 的 密码 是 :".$SPS; 
Ws 
< /body> < /html> 
9-1. php 的 运行 结果 如 图 9-1 所 示 , 单 击 “ 登 录 ” 按 钮 ,就 会 将 表单 数据 提交 给 9-2. 
php,9-2. php 接收 并 显示 数据 ,如 图 9-2 所 示 。 
请 注意 表单 代码 中 有 几 个 关键 属性 与 接收 表单 数据 的 程序 密切 关联 ,如 图 9-3 所 示 。 
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ET ol x 
文件 中 编辑 查看 WW” 属 
地 址 加) 峰 xte:meeahes 司 | 链接 








您 输入 的 用 户 名 是 :tang 


用 记名 :Ere “| 兴 友 :5 | 草 到 你 输入 的 密 得 是 :123 ”到 








图 9-1 9-1. php 的 运行 结果 图 9-2 9-2. php 的 运行 结果 
需要 用 $_POSTI 接收 表单 数据 的 
接收 数据 文件 是 9-2.php 
TS am 人 


<form method= 1 "post" ! action= ' "9-2.php" '> 








用 户 名 :<input type="text" name= "userName" 


<input type="submit" value=" 登 录 "> 


根据 name 属 性 


图 9-3 表单 代码 中 与 接收 数据 密切 相关 的 属性 









</form> 


说 明 : 

(1) 在 9-1. php 中 ,二 form 放 标记 的 method 属性 值 为 post, 表 示 该 表单 提交 数据 时 
以 POST 方式 提交 。 如 果 将 其 改 为 get, 那 么 将 以 GET 方式 提交 ,此 时 必须 用 $ _GET[] 
才能 获取 表单 数据 。 

(2) 二 form 记 标记 的 action 属性 用 来 指定 接收 表单 数据 的 文件 , 它 的 属性 值 可 以 是 
相对 URL 或 绝对 URL。 这 里 因为 两 个 文件 在 同一 个 文件 夹 下 ,直接 写 文件 名 即 可 。 由 
于 只 有 服务 器 端 程序 才能 接收 表单 数据 ,因此 该 文件 中 必须 含有 PHP 代码 。 

(3) 9-1. php 中 有 3 个 表单 元 素 : 2 个 文本 框 和 1 个 提交 按钮 ,通过 表单 元 素 的 name 
属性 值 可 以 获取 该 表单 元 素 中 输入 的 内 容 ( 即 value 属性 值 ), 其 中 $ _POSTL[ 
"userName"] 会 返回 第 一 个 文本 框 中 输入 的 值 (文本 框 会 将 框 中 的 内 容 作 为 其 value 属 
性 值 ), $ _POST[L"PS"J 会 返回 第 二 个 文本 框 中 输入 的 值 。 而 由 于 没有 对 提交 按钮 设置 
name 属性 ,因此 它 的 value 值 不 会 发 送 给 服务 器 。 

(4) 在 9-2. php 中 ,也 可 以 不 将 $_POST 的 值 赋 给 变量 而 是 直接 使 用 ,例如 ,echo 
"您 输入 的 用 户 名 是 :". $_POST["userName"]。 但 为 了 方便 引用 ,也 为 了 能 对 获取 的 
值 先进 行 一 些 检验 处 理 ( 如 过 滤 非 法 字符 或 空格 ,本 例 省 略 ) ,最 好 先 用 一 个 变量 引用 它 。 


2. 使 用 一 个 网 页 文件 


上 述 示例 中 的 两 个 文件 可 以 合并 为 一 个 文件 。 也 就 是 说 ,网 页 可 以 将 表单 中 的 信息 
提交 给 自身 。 这 样 做 的 好 处 是 减少 了 网 站 内 网 页 文件 数量 。 
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实现 的 方法 是 : 设置 form 放 标记 的 action 王 ”" 或 action 一 "自身 文件 名 " ,然后 将 表 
单 代 码 和 PHP 代码 写 在 同一 个 文件 中 ,并 判断 只 有 在 用 户 提交 了 表单 后 才 执 行 PHP 代 
码 , 代 码 如 下 ,运行 效果 如 图 9-4 所 示 。 





<html> <body> 
< form method= "post" actior= "> 
用 户 名 :<input type= "text" name= "userName" size= "12"> 
密码 : < input type= "text" name= "Ps" size= "10"> 
< input type= "sumit" name= "denglu" value= "登录 吃 
< /for> 
<? 
if(isset ($_ POST['denglu'])) { // 判 断 用 户 是 否 提 交 了 表单 ( 即 单 击 了 提交 按钮 ) 
$userName= $_POST["userName"]; 
$PS=$_POST["PS"]; 
echo "您 输入 的 用 户 名 是 :".$userName; 
echo "<br> 您 输入 的 密码 是 :".$PS; } > 
< /pody> < /html> 
说 明 : 
(1) 本 例 中 ,将 9-2. php 中 的 PHP 代码 
全 部 放 在 一 个 条 件 语句 if (isset( $ _POST 
[Ldenglu]])) {…}) 中 。 它 表示 ,如 果 用 户 单 击 您 输入 的 用 户 名 是 : 李 四 
了 "登录 "按钮 ($_POST['denglu] 变 量 就 会 您 钙 入 的 密码 是 :1234 
存在 ) , 才 执 行 该 条 件 语句 中 的 内 容 : 获取 表 图 9-4 9-3. php 的 执行 结果 
单数 据 并 输出 。 因 此 , 当 用 户 刚 打开 页 面 时 ， 
还 未 单 击 提交 按钮 ,就 不 会 执行 条 件 语句 中 的 内 容 , 只 会 显示 表单 。 
(2) 提交 表单 就 会 刷新 一 次 网 页 ,而 刷新 页 面 就 会 将 页 面 中 的 所 有 代码 重新 执行 一 
次 。 因 此 用 户 单 击 提交 按钮 后 ,9-3. php 的 代码 会 从 头 到 尾 重新 执行 一 遍 。 
想 一 想 : 当 用 户 输入 信息 后 ,9-3. php 同时 显示 了 表单 界面 和 获取 的 信息 ,如 果 只 
望 输出 获取 信息 ,而 不 再 显示 表单 , 即 和 9-2. php 执行 效果 一 模 一 样 ,该 怎么 修改 9-3. 
php 呢 ? 


翌 http://loecalhoest/phpy67exanileye zesss 因 阿 [=j3| 





3. 获取 复杂 一 点 的 表单 页 面 


下 面 是 一 个 获取 用 户 注册 信息 的 例子 ,其 中 9-4. php 用 来 显示 表单 ,9-5. php 用 来 获 
取 表 单数 据 。 请 仔细 体会 获取 单 选 框 ` 复 选 框 .下 拉 框 和 多 行文 本 域 等 表单 元 素 中 内 容 的 
为 法 。 


<html> <body> 
<hl alignr "center> 新 用 户 注册 < /bl> 
< formmethod "Fost" actiorr "9- 5.ghp"™> 
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姓名 : < input type= "text" name= "name"> <br> 
性 别 : < input type= "radio" name= "Sex" value="l" checked= "checked"> 男 
< input type= "radio" name= "Sex" value= "0"> 女 <br> 
爱好 : < input type= "checkbox" name= "habby[l" value= "太极 拳 心 太极 产 
< input type= "checkbox" name= "hobby[]" value=" 吓 乐 吃 音乐 
< input type= "checkbox" name= "hobby[]" value= " 太 游 吃 旅 游 <br> 
职业 :< select name= "career"> 
< cption value= 喇 育 业 省 教育 业 < /apticn> 
<cpticn value= "医疗 业 吃 医疗 业 < /apticn> 
<cpticn value= 哄 他 吃 其 他 < /option> 
< /select><br> 
个 性 签名 :< textarea name= "intro" rows= "2" cols= "20"> < /textarea> <br> 
< input type= "submit" value="” 提交 > 
< /fomm> 


<html> < body> 
<h3 align= "center"> 
<? $name=$ POST["name"]; // 获 取 各 个 表单 元 素 的 值 
$Sex= $_POST["Sex"]; 
$hopoy= $_FOST["hocby"]; 
$career=$_POST["career"]; 
$intro=$_POST["intro"]; 
S$hobbynumr count ($hobby) ; 
echo " 别 敬 的 ".Snamey // 输 出 各 个 表单 元 素 的 值 
if($Sex=="") echo "先生 < /h3> "; // 根 据 单 选 框 的 值 输出 先生 或 女士 
证 ($Sex== "0 echo "女士 < /h3> "; 
echo "<p> 您 选择 了 ".Shobbynum." 项 爱好 :< /p>"; 
for($i= 0;$i< $ShobbynumzSi++) // 通 过 循环 输出 复 选 框 的 值 
echo $hoppy[$i]." '; 
echo "<br> 您 的 职业 : " .$career; 
echo <br> 您 的 个 性 签名 : " .$intro; 
//Nar_ dmp($_POST); // 获 取 所 有 表单 元 素 的 值 


<E><a hre 人 f= "Javascript:history.go(- 1 了)"> 返 回 修改 </a>< /p> 

< /pody> < /htm> 

程序 9-4. php 的 初始 运行 效果 如 图 9-5 所 示 , 单 击 “ 提 交 ” 按 钮 后 效果 如 图 9-6 所 示 。 

说 明 : 

(1) 对 于 单 选 框 ,两 个 单 选 框 的 name 属性 值 一 样 ,就 表示 这 是 一 组 ,只 能 选中 一 个 。 

(2) 对 于 复 选 框 ,三 个 复 选 框 的 name 属性 值 相同 ,也 表示 是 一 组 ,但 复 选 框 可 以 选择 
多 个 ,如 果 选 中 多 个 , 则 多 个 复 选 框 的 值 将 保存 在 一 个 数组 中 ,可 以 用 循环 语句 输出 所 有 
选中 复 选 框 的 值 。 

(3) 总 的 来 说 ,表单 元 素 可 分 为 两 类 : 
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新 用 户 注册 
姓名 : 民 = 牛 | 


尊敬 的 张三丰 先生 
您 选择 了 2 项 爱好 ， 


性 别 ，@ 田 复 选 框 的 值 


女 
爱好 ， 反 太极 郑 三 音乐 区 旅游 
职业 ， [本 可 


个 性 签名 ， 
[i 











修改 








图 9-5 9-4. php 的 初始 运行 结果 图 9-6 9-4. php 单 击 提交 按钮 后 


Q@ 对 于 文本 框 、 密 码 框 ,多 行文 本 框 这 些 需要 用 户 输入 内 容 的 , $ _POST[] 获 取 的 就 
是 用 户 输入 的 内 容 ; 

@ 对 于 单 选 框 、 复 选 框 下拉 列表 框 \ 隐 藏 域 这 些 无 须 用 户 输入 内 容 的 , $ _POST[] 
获取 的 就 是 选中 项 的 value 值 。 

因此 对 第 @ 类 表单 元 素 必须 设置 value 属性 值 。 

(4) 当 多 个 复 选 框 属于 同一 组 时 ,对 其 name 属性 值 命名 ,一 定 要 命名 成 数组 的 形式 ， 
如 name 二 "hobby[]"。 这 样 $_POST["hobby"J 返 回 的 结果 才 会 是 一 个 数组 ,可 以 利用 
数组 名 加 索引 值 来 取得 其 中 某 个 复 选 框 的 value 值 ,例如 $S_POST[L"hobby"j[1j 的 值 为 
“旅游 ”。 还 可 利用 count() 方 法 获得 该 数组 中 的 元 素 总 数 , 例 如 count( $ hobby) 。 


4. 对 $_POST 数组 的 深入 认识 

实际 上 ,$_POST 是 一 个 数组 , 它 保 存 了 接收 到 的 所 有 的 表单 元 素 值 ,而 $_POST 
["Sex"] 是 一 个 数组 元 素 。 我 们 可 以 在 9-5. php 中 添加 一 行 代码 ， 

Var dnp($ POST); 
则 输出 结果 


array(5) { ["name"]=> string(6) "张三丰 " ["Sex"]=> string(1) "1" ["hotby"]=>array(2) { [0]=> string 

(6) "太极 拳 " [1]=> string(4) "旅游 " } ["career"]=> string(6) "医疗 业 " ["intro"]=> string(10) "干杯 

不 醉 !" } 

可 见 , 在 该 数组 中 ,数组 元 素 的 索引 值 为 表单 元 素 的 name 属性 值 ,数组 元 素 的 值 为 
表单 元 素 的 value 属性 值 。 因 此 可 以 用 数组 元 素 如 $_POSTL"name 属性 值 "] 获 取 到 对 





应 表单 元 素 的 value 属性 值 。 
$ _POST 数组 元 素 的 索引 一 定 要 加 引号 ,如 $_POST["Sex"], 不 加 虽然 不 会 出 错 ， 
但 运行 效率 会 大 大 降低 ,原因 请 参见 7. 5. 1 节 中 “创建 数组 的 注意 事项 ”。 


9.1.2 使 用 $_GET[] 获 取 表 单数 据 
如 果 表 单 是 以 GET 方式 提交 的 , 即 method 属性 值 为 GET( 或 没有 设置 ) , 则 必须 用 
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$_GET[L] 数 组 获取 表单 中 的 数据 。 读 者 可 将 9-1. php 中 的 method 王 "post" 修改 为 
method 一 "get" ,将 9-2. php 中 所 有 的 $ _POST 修改 为 $_GET, 就 会 发 现 仍然 能 正常 获 
取 表 单 中 数据 ,运行 效果 类 似 于 图 9-1 和 图 9-2 。 

但 GET 方式 与 POST 方式 提交 是 有 区 别 的 ,GET 方式 会 将 表单 中 的 数据 以 URL 
字符 串 的 形式 发 送 给 服务 器 ,例如 , 当 9-1. php 以 GET 方式 提交 后 ,浏览 器 地 址 栏 会 
显示 : 


http://localhost/9- 1.FEhp?userName= tang&PS= 123 
而 以 POST 方式 提交 的 话 ,浏览 器 地 址 栏 只 会 显示 : 
http://localhost/9- 1.php 


可 见 ,POST 方式 提交 表单 比 GET 方式 提交 表单 更 安全 ,不 会 泄露 机 密 数 据 。 并且 ， 
POST 方式 发 送 数据 时 对 字 节 数 没有 限制 。 


9.1.3 使 用 $_GET[] 获 取 URL 字符 串 信 息 


URL 字符 串 又 称 为 查询 字符 串 ,这 些 字 符 串 信息 总 是 以 GET 方式 提交 给 服务 器 ,可 
以 使 用 $ _GET[] 方 法 获取 URL 字符 串 信 息 。 
1. 什么 是 URL 字符 串 
有 些 网 页 的 URL 后 面 会 接 一 些 以 “?” 号 开头 的 字符 串 ,这 称 为 URL 字符 串 。 例 如 : 
http://ec.hynu.cn/otype.php?owenl= 近 期 工作 gpage=2 
其 中 “?owenl 一 近期 工作 &page 一 2” 就 是 一 个 URL 字符 串 , 它 包含 2 个 URL 变量 
(owenl 和 page) ,而 “近期 工作 ”和 “2” 分 别 是 这 两 个 URL 变量 的 值 ,URL 变量 和 值 之 间 
用 “=” 号 连接 ,多 个 URL 变量 之 间 用 “&” 连 接 。 
URL 字符 串 会 连同 URL 信息 一 起 作为 HTTP 请 求 数据 提交 给 服务 器 端的 相应 文 
件 , 例 如 上 面 的 URL 字符 串 信 息 将 提交 给 otype. php。 利 用 $ _GETLJ 可 以 获取 URL 字 
符 串 中 变量 的 值 。 例 如 ,在 otype. php 中 编写 如 下 代码 ,就 能 获取 到 这 些 查 询 变 量 的 
值 了 。 
二 党 
Sowenr=$ GET["owenl"] /获取 变量 owenl 的 值 ,返回 “近期 工作 ” 
S$page=$_GET["page"]; // 获 取 变 量 page 的 值 ,返回 2 
> 


2. 设置 URL 字符 串 的 方法 


当 网 页 通过 超 链接 或 其 他 方式 从 一 张 网 页 跳 转 到 另 一 张 网 页 时 ,往往 需要 在 跳 转 的 
同时 把 一 些 数据 传递 到 第 二 张 网 页 中 。 我 们 可 以 把 这 些 数 据 作 为 URL 字符 串 附 在 超 链 
接 的 URL 后 ,就 可 以 在 第 二 张 网 页 中 使 用 $_GET[LJ 获 取 URL 变量 的 值 。 例 如 


<a hre 人 "search.Fhp?keWeb 标 准 gpageNo= 5"> 查 询 结果 第 5 页 < /a> 


H.W. 准 网 页 设计 与 PHP 


则 在 search，php 中 就 可 用 $ _GETLj] 获 取 第 一 张 网 页 传递 来 的 URL 变量 的 值 。 这 是 通 
过 超 链接 设置 URL 字符 串 ,第 二 种 方法 是 在 二 form 放 标记 的 action 属性 中 设置 。 下面 
分 别 举例 介绍 。 

例 9.1 在 超 链接 中 设置 URL 字符 串 并 获取 ,运行 结果 如 图 9-7 和 图 9-8 所 示 。 





<Ul> 
<1li><ahre 全 "9- 9.php?id=1"”>《 电 子 商务 安全 ) 震 撼 上 市 < /a>< /li> 
<1i><a href="9- 9.php?id=2"> ASP 动 态 网 页 设计 与 Ajax 技 术 < /a>< /li> 
<1i><a href="9- 9.pghp?id=3"> 基 于 Web 标 准 的 网 页 设计 与 …< /a>< /li> 
</u> 


<? $idintval($ GET["id"]); // 获 取 EL 字符 串 中 变量 ia 的 值 并 转 为 整 型 
if($icd==1) 
echo < 户 这 是 第 一 条 新 闻 < /p>"; 
elseif ($id==2) 
echo < 户 这 是 第 二 条 新 闻 < /p>"; 
elseif ($id==3) 
echo < 户 这 是 第 三 条 新 闻 < /p>"; 
else edho "了 > 参数 非法 </p> ”2 


2 ht 2 /fiecelhest/s 二 和 






地 址 加 网 ato: /eeehost/no/o/ exo]| ee 
这 是 第 二 条 新 闻 














到 





图 9-7 单 击 9-6. php 中 第 二 个 超 链接 图 9-8 ”9-7. php 的 运行 结 


说 明 : 

(1) 9-6. php 中 所 有 链接 都 是 链接 到 同一 网 页 ,只 是 设置 了 不 同 的 URL 变量 值 ,可 
以 使 9-7. php 根据 不 同 链接 传 来 的 不 同 id 值 显 示 对 应 的 网 页 内 容 , 实 现 了 动态 新 闻 网 页 
效果 。 

(2) URL 变量 中 的 数据 都 是 字符 串 类 型 的 值 ,因此 如 果 要 对 数值 进行 判断 ,最 好 先 
转换 为 数值 型 ,这 样 可 防止 非法 用 户 手工 在 URL 后 注入 非法 参数 。 

例 9.2 在 二 form 放 标记 的 action 属性 中 设置 URL 字符 串 。 运 行 结果 如 图 9-9 
所 示 。 





<html> <body> 
<? $flaq-$ GET["flag"]; // 获 取 url 变 量 flag 的 值 
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if($flag== "1') 
echo "欢迎 '.$_POST["'user'].' 光临 1"; 
else // 没 有 按 提交 按钮 时 
echo "< form method= "post" action= "?flag= 1"> 
姓名 :< input name= "user" type= "text" size="15" /> 
< input type= "sutmit" value= 虽 交 " /> 
< /fom> '; > 


< /pody> < /html> 





EO olx| 


EO TT Te ol x 


文件 E) 编辑) 查看) 收 ;>| 局 
地 址 四 ) 周 http:y/localhest/php/ 避 | 链接 


欢迎 张三丰 光临 ! 





文件 中 编 如 中 查看 Wi >| 避 
地 址 m) [他 http://localhost/php/( 因 | 链接 
| 姓名 ， 峙 三 丰 提交 | 加 








图 9-9 9-8. php 的 运行 结果 


说 明 : 在 王 form 之 标记 中 ,action 一 "?flag 一 1"” 省 略 了 文件 名 ,表示 将 表单 提交 给 自 


身 , 设 置 查询 字符 串 flag=1 用 来 判断 用 户 是 否 单 击 了 “提交 ”按钮 ,一 旦 单 击 了 则 URL 


地 址 后 面 会 增加 "?flag 二 1" ,因此 可 据 此 输出 不 同 的 内 容 。 
3. 设置 URL 字符 串 的 方法 总 结 


如 果 要 设置 URL 字符 串 ,以便 将 URL 字符 串 中 的 信息 传递 给 相应 网 页 。 有 以 下 
方法 : 

(1) 在 超 链接 的 href 属性 值 中 的 URL 后 添加 URL 字符 串 ; 

(2) 在 表单 的 action 属性 值 中 的 URL 后 添加 URL 字符 串 ; 

(3) 直接 在 浏览 器 地 址 栏 中 的 网 页 URL 后 手工 输入 URL 字符 串 。 

提示 : 表单 如 果 设 置 为 GET 方式 提交 ,那么 表单 中 数据 将 转换 成 URL 字符 串 发 送 
给 服务 器 。 此 时 若 在 表单 的 action 属性 值 中 也 设置 URL 字符 串 , 那 么 将 发 生 冲 突 ， 
action 属性 值 中 的 URL 字符 串 将 无 效 。 因 此 如 果 在 action 属性 值 中 有 URL 字符 串 , 则 
表单 只 能 用 POST 方式 提交 ,9-8. php 就 是 一 个 例子 。 


9.1.4 发 送 HTTP 请 求 的 基本 方法 


浏览 器 向 服务 器 发 送 HTTP 请 求 有 两 种 基本 方法 : 一 种 方法 是 在 地 址 栏 输入 网 址 
并 回 车 ,这 样 将 以 GET 方式 向 服务 器 发 送 一 个 HTTP 请 求 ; 另 一 种 方法 是 提交 表单 ,如 
果 设 置 form 标记 的 method 属性 为 get, 那 么 表单 中 的 数据 将 以 GET 方式 发 送 给 服务 
器 ;如 果 设 置 form 标记 的 method 属性 为 post, 那 么 数据 将 以 POST 方式 发 送 。 对 于 
GET 方式 的 HTTP 请 求 ,服务 器 端 只 有 使 用 $ _GETL] 才 能 获取 其 中 的 数据 ,而 对 于 
POST 方式 的 HTTP 请 求 ,服务 器 端 只 有 使 用 $_POSTL] 才 能 获取 其 中 的 数据 ,如 表 9-2 
所 示 。 
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表 9-2 浏览 器 发 送 请 求 与 服务 器 获取 请 求 的 方法 














发 送 HTTP 请 求 发 送 请 求 的 方式 服务 器 获取 请 求 的 方法 
输入 网 址 (URL) 
POST 方式 $_POST[] 
method= "get" 
提交 表单 
method= "post" GET 方 式 $_GET[] 











一 个 HTTP 请 求实 际 上 是 一 个 数据 包 , 如 果 以 提交 表单 形式 发 送 HTTP 请 求 , 则 这 
个 数据 包 中 含有 表单 数据 ,如 果 是 GET 方式 发 送 的 请 求 , 则 包含 了 URL 字符 串 中 的 
数据 。 

以 9-1. php 和 9-2. php 的 执行 过 程 为 例 。 我 们 可 以 把 浏览 器 发 送 的 HTTP 请 求 数 
据 包 想象 成 一 辆 卡车 , 它 装 载 了 用 户 在 表单 中 填写 的 信息 。 当 单 击 “ 提 交 ” 按 钮 后 ,就 会 发 
送 HTTP 请 求 给 服务 器 。 这 就 好 比 这 辆 卡车 载 着 货物 (表单 中 的 信息 ) 从 浏览 器 行驶 到 
了 服务 器 。 服 务 器 此 时 可 以 使 用 $_POST[] 印 下 卡车 上 的 货物 ,保存 到 服务 器 端的 变量 
中 。 整 个 过 程 如 图 9-10 所 示 。 


HTTP 请 求 HTTP 请 求 


发 往 服务 器 
mia 








$user=$_POST["user"]; 
Apache S$PS=$_POST["PS"]; 浏览 器 


阶段 二 : 服务 器 获取 HTTP 请 求 阶段 一 : 浏览 器 发 送 HTTP 请 求 
图 9-10 浏览 器 发 送 HTTP 请 求 和 服务 器 获取 HTTP 请 求 内 容 的 示意 图 


提示 : PHP 还 提供 了 $_REQUESTD] 数 组 , 它 包 含 了 $_GET、$_POST 和 $_COOKIE 
数组 信息 。 因 此 它 可 以 获取 GET 或 POST 两 种 方式 提交 的 数据 ,以 及 Cookie 数据 。 所 
以 ,PHP 程序 中 的 $_GET 或 $_POST 都 可 换 成 $_REQUEST。 


9.1.5 使 用 $_SERVERI |] 获取 环境 变量 信息 


实际 上 ,浏览 器 发 送 的 HTTP 请 求 数据 包 中 还 包含 了 客户 端的 IP 地 址 ,请求 文 件 的 
URL 等 环境 变量 信息 。 服 务 器 在 接收 到 这 个 请 求 时 也 会 给 出 服务 器 端 IP 地 址 等 环境 变 
量 信息 ,利用 $_SERVER[] 数 组 可 以 方便 地 获取 到 这 些 信息 。 例 如 获取 浏览 者 IP 和 来 
路 的 程序 如 下 : 


<? $IP=$ SERVER['REMDIE ADDR']; // 获 取 用 户 下 地 址 
$Eram-$ SERVER['HTTP REFERER']; // 获 取 用 户 来 路 
echo "您 的 到 地 址 是 : " .$IP; 
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echo '<br> 您 是 单 击 '.$From.' 页 面 中 的 链接 进来 的 ' 

> 

在 程序 中 , REMOTE_ADDR 就 是 一 个 环境 变量 名 ,表示 客户 端的 IP 地 址 。 而 
HTTP_REFERER 可 以 获取 用 户 是 从 哪个 网 页 进入 当前 网 页 的 。 例 如 ,在 9-6. php 中 做 
一 个 到 9-9. php 的 超 链接 , 单 击 该 超 链接 进入 9-9. php, 则 9-9. php 的 运行 结果 如 下 : 

您 的 到 地 址 是 : 127.0.0.1 

您 是 单 击 http://1localhost/6/9- 8.php 页 面 中 的 链接 进来 的 

通过 HTTP_REFERER 获取 用 户 来 路 ,可 以 知道 自己 的 网 页 被 哪些 网 站 收录 或 反 
链 , 例 如 ,如 果 用 户 是 单 击 “ 百 度 ” 上 的 搜索 结果 打开 当前 网 页 的 ,那么 获取 来 路 就 会 返回 
百度 搜索 页 的 URL。 

其 他 比较 有 用 的 环境 变量 如 表 9-3 所 示 。 


表 9-3 常用 的 环境 变量 






































环境 变量 名 功能 说 明 
QUERY_STRING URL 字符 串 信 息 
SCRIPT_NAME 当前 文件 相对 于 网 站 目录 的 路 径 和 文件 名 
SCRIPT_FILENAME 当前 文件 在 硬盘 中 的 路 径 和 文件 名 
PHP_SELF 当前 正在 执行 脚本 的 文件 名 
DOCUMENT_ROOT 当前 网 站 根 目录 
SERVER_SOFTWARE Web 服务 器 软件 的 名 称 , 如 11S/5. 1 
SERVER_PORT 服务 器 端的 端口 号 
SERVER_NAME 服务 器 主机 的 名 称 
SERVER_SIGNATURE 包含 服务 器 版 本 和 虚拟 主机 名 的 字符 串 
REQUEST_METHOD HTTP 请 求 的 方式 ,如 GET .POST 
REQUEST_TIME HTTP 请 求 开始 时 的 时 间 截 


9.2 发 送 数 据 给 浏览 右 


Web 应 用 程序 的 基本 功能 包括 两 方面 : 一 是 接收 并 处 理 浏览 器 发 送 的 HTTP 请 求 
数据 ,二 是 根据 HTTP 请 求 做 出 HTTP 响应 ,这 包括 输出 信息 给 浏览 器 ,使 浏览 器 重 定 
向 到 其 他 页 面 等 。 


9.2.1 使 用 echo 方法 输出 信息 


在 PHP 中 ,echo() 是 最 常用 的 方法 , 它 用 来 将 服务 器 端的 数据 发 送 给 浏览 器 。 所 发 
送 的 信息 可 以 是 字符 串 常量 ,变量 .HTML 代码 .JavaScript 代码 等 所 有 浏览 器 能 解释 的 
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代码 。 下 面 是 使 用 echo 方法 输出 信息 的 示例 : 





过 间 echo "欢迎 您 : "; // 答 出 字符 串 常量 
$ 二 路 花 ' 
echo $i; // 输 出 变量 
echo '<P> 欢 迎 您 : '.$i .'< /p> // 输 出 字符 串 常量 和 变量 的 混合 体 


echo "<a href- '9- 4.php'> 新 用 户 注册 < /a> "; // 输 出 HP 代码 
echo "< script> alert(" 留 言 修改 成 功 ');location.href= '9- 8.php'; 
</script>"; 
echo "<br> 欢 迎 您 : ",$i; /| 输出 多 个 字符 串 > 
说 明 ，; 
(1) echo 后 可 接 字 符 串 常量 或 变量 。 回 顾 一 下 字符 串 常量 和 变量 的 写法 : 两 边 加 引 
号 表示 字符 串 常量 ,不 加 引号 表示 的 是 变量 。 如 果 要 输出 的 内 容 既 有 字符 串 常量 又 有 变 
量 , 则 它们 之 间 要 用 连接 符 (. ) 连 接 或 使 用 双 引 号 字符 串 包 含 变量 。 
(2) HTML 代码 本 质 上 也 是 一 段 字 符 串 ,echo 可 将 它 作 为 字符 串 常量 输出 ,因此 
HTML 代码 两 边 要 加 引号 。 
(3) echo 方法 可 以 加 括号 ,也 可 以 不 加 括号 ,如 “echo "欢迎 "" 也 可 写成 “echo(" 欢 


地" 

(4) echo 还 有 一 种 省 略 的 写法 , 即 <? ==… ? 二 (< 二?” 和 "一 "之 间 不 能 有 空格 )， 
例如 

<2 半 吹 迎 您 : 史 > 

<2' 必 P> 欢 迎 您 : '.$i .'</p> 号 > 


这 种 方法 虽然 简便 ,但 它 的 两 端 必须 要 有 "二?” 和 “? 二 ”导致 在 它 前 面 和 后 面 的 
PHP 代码 也 必须 用 *? 二 ”和 “< 王 ?? 进 行 封闭 。 如 果 它 的 前 面 和 后 面 都 是 HTML 代码 , 则 
用 这 种 方式 比较 方便 。 如 果 它 的 前 后 都 是 PHP 代码 , 则 使 用 echo 方法 更 清晰 。 

提示 : 在 PHP 中 ,还 有 print、print_r、var_dump 这 些 语句 也 能 用 来 输出 信息 。 

echo 和 print 功能 几乎 完全 相同 ,唯一 的 区 别 是 : 使 用 echo 可 以 同时 输出 多 个 字符 
串 , 多 个 字符 串 之 间 用 各 号 隔 开 即 可 ,而 print 一 次 只 能 输出 一 个 字符 串 。 

print_r() 用 于 输出 整个 数组 ,var_dump() 用 于 输出 变量 的 数据 类 型 和 值 ,是 调试 程 
序 的 好 帮手 。 这 两 个 方法 后 面 的 括号 都 不 能 省 略 。 


9.2.2 使 用 header() 函 数 重 定向 网 页 


在 HTML 中 ,可 以 使 用 超 链 接 引 导 用 户 至 其 他 页 面 ,但 必须 要 用 户 单 击 超 链 接 才 
行 。 可 是 有 时 需要 自动 引导 (也 称 为 重 定向 ) 用 户 至 另 一 页 面 (如 用 户 注册 成 功 后 就 自动 
跳 转 到 登录 页 面 ) 。 或 者 根据 程序 来 动态 判断 将 用 户 引导 到 哪 一 页 面 。 


1. 重 定向 网 页 
在 PHP 中 ,使 用 header() 函 数 可 以 重 定向 网 页 ,例如 : 
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header ("location:http://www.baidu.oom"); // 重 定向 到 绝对 UEL 

header ("location:9- 8.php"); // 重 定向 到 相对 URL 

header ("location:?flag= 1"); // 重 定向 到 本 页 ,并 增加 UEL 字 符 串 
$url= '9- 1.php'; 

header ("location:$url"); // 重 定向 到 变量 表示 的 网 址 

?> 

注意 : 


(1) location 和 “:” 号 之 间 不 能 有 空格 ,否则 会 出 错 ; 

(2) 在 header 语句 之 前 ,服务 器 不 能 向 客户 端 发 送 任 何 数 据 ,比如 不 能 有 echo 语句 
也 不 能 有 HTML 代码 (包括 空 行 ); 

(3) 如 果 PHP 代码 中 有 多 条 重 定向 语句 , 则 会 重 定向 到 最 后 一 条 语句 中 的 URL, 表 
明 PHP 在 执行 重 定向 语句 后 ,仍然 会 继续 执行 后 面 的 语句 。 如 果 希 望 执 行 完 重 定向 语 
身后 立即 停止 脚本 执行 ,应 在 header 语句 后 使 用 exit() 或 die() 方 法 退出 。 

header 函数 的 功能 和 JavaScript 脚本 中 location. href 的 功能 有 些 相 似 ,如 “header 
("location:9-8. php");” 又 可 使 用 “echo "到 script 一 location. href 一 9-8. php'; 二 /script 二 "3;” 
来 实现 。 不 过 header() 函数 要 求 在 重 定向 之 前 不 允许 服务 器 向 浏览 器 输出 任何 内 容 , 因 
此 使 用 该 方法 要 么 确保 先 用 ob_start() 打 开 服 务 器 缓冲 区 ,使 所 有 的 内 容 先 输出 到 缓存 
中 ,还 没有 输出 到 浏览 器 ;要 么 确保 在 header() 语 句 之 前 没有 任何 内 容 输出 到 页 面 。 因 此 
下 面 的 写法 是 错误 的 : 

<html> <body> < 上 -错误 ,header 语 句 前 不 能 输出 内 容 到 浏览 器 --> 

<? header("location:9- 8.Fhp "); > 

< /pody> < /html> 


2. header( ) 函 数 的 其 他 功能 
实际 上 ,header() 函数 的 功能 是 向 浏览 器 传送 一 个 HTTP 响应 头 信息 ,语法 如 下 ， 


void header (string message [, bool replace [, int http response code]]) 
其 中 ,message 参数 用 来 设置 响应 头 信息 ,其 格式 为 “header_name: header_value”。 
浏览 器 收 到 这 些 响 应 头 信 息 后 ,会 做 出 适当 的 反应 。 如 收 到 “Location: URL” 响 应 
头 后 ,浏览 器 就 会 将 页 面 重 定向 到 URL 指定 的 页 面 。header() 函 数 的 其 他 功能 如 下 : 
1) 文件 延迟 转向 
使 用 Refresh 响应 头 , 可 以 使 页 面 延迟 N 秒 后 , 重 定向 到 指定 的 URL 页 面 。 例如: 


header ('Refresh:3; url=http://ec.hynu.an'); //3 秒 后 转 到 ec.hyma.cn 


2) 禁用 浏览 器 缓存 
为 了 让 用 户 每 次 都 能 从 服务 器 上 获取 最 新 的 网 页 ,而 不 是 浏览 器 缓存 中 的 网 页 ,可 以 
使 用 下 列 标 头 禁用 浏览 器 缓存 。 


header (‘Expires: Mon,26 Jul 1997 05:00:00 GMT'); // 设 置 过 期 时 间 为 过 去 某 一 天 
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heager ('Last— Modified:' . grdate('D, dMY H:i:s') . 'QMT'); 

heaqer ('Cache— Control: no- store, no- cache must- revalidate'); 

header ('Pragma: no- cache'); 

3) 强制 下 载 文件 

简单 文件 下 载 只 需要 使 用 超 链接 标记 一 a> ,将 href 属性 值 指定 为 下 载 的 文件 即 可 。 
这 种 下 载 方式 ,只 能 处 理 一 些 浏览 器 不 能 打开 的 文件 (如 rar 文件 ), 但 如 果 要 下 载 的 文件 
后 缀 名 是 . html 的 网 页 文件 或 图 片 文件 等 ,使 用 这 种 链接 方式 并 不 会 提示 下 载 ,而 是 将 文 
件 内 容 直 接 输出 到 浏览 器 。 为 此 ,可 使 用 header 函数 向 浏览 器 发 送 必要 的 头 信息 ,以 通 
知 浏览 器 进行 下 载 文件 的 处 理 。 强 制 下 载 文件 的 示例 代码 如 下 : 





<? $filename= "test.gif"; 1/ 指定 文件 名 
header ('Content— Type: image/gif'); // 指 定 下 载 文件 类 型 
header ('Content- Disposition: attachment; filename="'.$filename.'™"'); /下载 文件 的 描述 
header ('Content- Iength: '.filesize ($filename)); /下 载 文 件 的 大 小 
readfile ($filename); // 将 文件 内 容 读 取出 来 并 直接 输出 ,以 便 下 载 


这 样 ,在 当前 目录 下 放 一 个 图 片 文件 test. gif, 运行 程序 ,就 会 提示 下 载 test gif 
文件 。 
9.2.3 操作 缓冲 区 


所 谓 缓冲 区 ,是 指 服务 器 内 存 中 的 一 块 区 域 。 在 没有 开启 缓冲 区 时 ,执行 文件 输出 的 
内 容 都 是 直接 输出 到 浏览 器 。 开 启 缓冲 区 后 ,执行 文件 输出 的 内 容 会 先 存 人 缓冲 区 ,直到 
脚本 执行 完毕 (或 遇 到 一 些 缓冲 区 操作 指令 ) ,再 将 缓冲 区 中 的 内 容 发 送 给 浏览 器 。 

PHP 提供 了 很 多 操作 缓冲 区 的 函数 ( 见 表 9-4), 这 些 函 数 名 中 都 有 “ob”,ob 是 
“Output Control” 的 缩写 ,表示 在 服务 器 端 先 存储 有 关 输 出 ,等 待 适当 的 时 机 再 输出 。 下 





面 分 别 介绍 。 
表 9-4 PHP 缓冲 区 操作 函数 
函 数 名 功 能 
ob_start 打开 输出 缓冲 区 





ob_get_contents “| 返回 内 部 缓冲 区 的 内 容 
ob. get clean 返回 内 部 缓冲 区 的 内 容 , 并 关闭 缓冲 区 
6b. get tush 返回 内 部 缓冲 区 的 内 容 , 并 关闭 缓冲 区 ,再 将 缓冲 区 的 内 容 立 刻 输出 到 客户 中 
ob_get_length | 返回 内 部 缓冲 区 的 内 容 长 度 

二 删除 内 部 缓冲 区 的 内 容 , 但 不 关闭 缓冲 区 

立刻 输出 内 部 缓冲 区 的 内 容 , 但 不 关闭 缓冲 区 
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续 表 
函 数 名 功 能 
让 刷新 输出 缓冲 ,将 ob_flush 输出 的 内 容 , 以 及 不 在 PHP 缓冲 区 的 内 容 , 全 部 输 
出 至 浏览 器 
ob_end_clean 删除 内 部 缓冲 区 的 内 容 , 并 关闭 缓冲 区 
ob_end_flush 立刻 输出 内 部 缓冲 区 的 内 容 , 并 不 关闭 缓冲 区 





提示 : 缓冲 区 函数 名 中 ,end 表示 关闭 缓冲 区 ;clean 表示 删除 缓冲 区 中 的 内 容 ;flush 
表示 发 送 缓冲 区 中 的 内 容 到 浏览 器 :get 表示 缓冲 区 中 的 内 容 将 作为 函数 的 返回 值 返回 。 
1. 使 用 ob_start() 打 开 缓 冲 区 
ob_start() 用 来 打开 缓冲 区 ,下 面 的 程序 用 来 演示 打开 和 关闭 缓冲 区 时 的 差异 。 
<? cb start(); // 删 除 该 语句 再 试 试 
for($i=1;$i< 207$i++){ 
for ($j=1;$j< 600000;$j++); // 空 循环 语句 ,用 于 延迟 
echo $i." ™; 
ji 
当 程 序 中 有 ob_start() 语 句 时 ,缓冲 区 打开 ,程序 会 将 输出 的 内 容 先 存储 到 缓冲 区 ， 
待 程序 执行 完 后 ,再 将 缓冲 区 中 的 内 容 一 起 输出 到 浏览 器 。 因 此 运行 程序 后 ,会 先 延 迟 一 
段 时 间 ,然后 所 有 数字 一 起 显示 出 来 。 
将 ob_start() 语 句 删除 后 ,缓冲 区 关闭 ,程序 每 次 执行 到 输出 语句 就 会 立即 输出 , 因 
此 运行 程序 不 会 延迟 ,数字 会 一 个 一 个 地 显示 出 来 。 
2. ob_flush 和 ob_ clean() 方 法 


当 缓 冲 区 打开 后 ,ob_flush() 方 法 可 以 将 缓冲 区 中 的 内 容 立 刻 输出 到 客户 端 ,ob_ 
clean() 方 法 用 于 将 当前 缓冲 区 中 的 内 容 全 部 清空 。 例 如 : 


<? cb start(); 


echo "第 一 条 必 

cb flush(); // 立 刻 输 出 缓冲 区 中 的 内 容 

echo "第 二 条 六 

cb_clean(0; // 清 除 缓冲 区 中 的 内 容 

echo " 蔬 三 条 六 

cb end flush(); // 发 送 缓冲 区 的 内 容 到 浏览 器 ,并 且 关 闭 缓冲 区 


> 


程序 运行 结果 为 “第 一 条 第 三 条 ”。 

由 于 ob_flush 会 将 缓冲 区 中 的 内 容 立刻 输出 ,因此 “第 一 条 ”会 显示 在 页 面 上 ,然后 
“第 二 条 ”又 被 输出 到 缓冲 区 ,但 接 下 来 ob_clean() 方 法 清除 了 缓冲 区 中 的 内 容 , 因 此 “第 
二 条 ”不 会 显示 ;“ 第 三 条 ”不 受 影响 ,也 会 输出 到 缓冲 区 再 输出 到 页 面 。 
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总 结 : PHP 会 在 以 下 三 种 情况 下 将 缓冲 区 中 的 内 容 发 送 给 客户 端 ; 
(1) 遇 到 ob _flush() .ob_end_flush() 或 ob_get_flush() 函 数 ; 

(2) 程序 执行 完 ; 

(3) 遇 到 exit 或 die 函数 提前 终止 程序 。 





3. ob_get_contents 和 ob_get_length 函数 


当 缓 冲 区 打开 时 ,ob_get_contents 可 以 获取 缓冲 区 中 的 内 容 , 并 将 内 容 作为 字符 串 
返回 。ob_get_length 将 返回 缓冲 区 中 内 容 的 长 度 ,返回 值 为 整数 int 型 。 下 面 是 一 个 


例子 。 
<? ob start(); 
echo "<b> Hello Worldk /b> "; /输出 到 缓冲 区 ,但 不 会 立即 输出 到 页 面 
$ler= ob get_ length(); //$len 保 存 了 当前 缓冲 区 中 内 容 的 长 度 
$out= ab get_contents ()7 //sout 保存 了 当前 缓冲 区 中 的 内 容 
cb end_ clean(); // 清 空 并 结束 缓冲 区 
echo $out.'<br> '; /输出 <b> Hello Worldc /b> 
$out= strtolower (Sout)7 // 将 变量 $out 中 的 字符 转换 为 小 写 
var dp ($out,$1len); 了 > 
输出 结果 为 (注意 第 一 条 echo 语句 中 的 内 容 未 输出 , 它 被 ob_end_clean 方法 清 
除了 ) ， 


<b> Hello World /b> <br> string(18) "<b> hello worldc /b>" int(18) 


可 见 ,ob_get_contents 函数 可 以 将 缓冲 区 中 的 内 容 保存 到 一 个 字符 串 中 。 


9.3 使 用 $_SESSION 设置 和 读 取 Session 


网 站 经 常 需要 记 住 访问 者 的 一 些 信息 ,以 便 提 供 更 好 的 服务 。 例 如 用 户 登录 以 后 ,网 
站 中 的 所 有 页 面 都 能 显示 用 户 的 登录 名 ,这 就 需要 在 整个 网 站 中 使 用 一 种 “全 局 变量 ” 保 
存 用 户 名 。 但 是 普通 变量 的 作用 域 只 能 在 一 个 网 页 内 , 当 用 户 从 一 张 网 页 跳 转 到 另 一 张 
网 页 时 ,前 一 张 网 页 中 以 变量 、 常 量 形式 存放 的 数据 就 丢失 了 。 为 此 ,引入 Session 的 概 
念 ,只 要 把 用 户 的 信息 存储 在 Session 变量 中 ,用 户 在 网 站 页 面 之 间 跳 转 时 ,存储 在 
Session 变量 中 的 信息 不 会 丢失 ,而 是 在 整个 用 户 会 话 中 一 直 存在 下 去 。 

Session 的 中 文 是 “会 话 ” 的 意思 ,在 Web 编程 中 Session 代表 了 服务 器 与 客户 端 之 间 
的 “会 话 ”, 意 思 是 服务 器 和 客户 端 在 不 断 地 交流 。 如 果 不 使 用 Session, 则 客户 端 每 一 次 
请 求 都 是 独立 存在 的 , 当 服务 器 完成 某 次 用 户 的 请 求 后 ,服务 器 将 不 能 再 继续 保持 与 该 用 
户 浏览 器 的 连接 。 这 样 当 用 户 在 网 站 的 多 个 页 面 间 切 换 时 (请 求 了 多 个 页 面 ), 页 面 之 间 
无 法 传递 用 户 的 相关 信息 。 这 是 因为 ,HTTP 协议 是 一 种 无 状态 (Stateless) 的 协议 ,利用 
HTTP 协议 无 法 跟踪 用 户 。 从 网 站 的 角度 看 ,用 户 每 一 次 新 的 请 求 都 是 单独 存在 的 。 

在 PHP 中 ,使 用 $_SESSION[] 可 以 存储 特定 用 户 的 Session 信息 。 并 且 , 每 个 用 户 
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的 Session 信息 都 是 不 同 的 。 如 果 当 前 有 若干 个 用 户 访 问 网 站 , 则 网 站 会 为 每 个 用 户 建 
立 一 个 独立 的 Session 对 象 ,如 图 9-11 所 示 。 每 个 用 网站 服务 名 


户 都 无 法 访问 其 他 用 户 的 Session 信息 。 因 此 一 个 - 
用 户 访问 网 页 时 服务 器 为 其 创建 的 Session 变量 , 别 
人 是 看 不 到 的 。 


9.3.1 存储 和 读 取 Session 信息 用 户 1 用 户 2 用 户 3 
在 PHP 中 ,使 用 Session 前 都 需要 在 页 面 开 头 

用 session_start() 方 法 开启 Session 功能 。 然 后 就 可 1 

利用 Session 变量 存储 信息 了 , 它 和 使 用 普通 变量 存 图 9-11 Session 示意 图 

储 信息 很 相似 。 语 法 如 下 : 


$_SESSICN["Session 名 称 "]= 变 量 或 字符 串 信 息 
如 果 要 读 取 Session 变量 信息 ,可 将 其 赋 给 一 个 变量 或 直接 输出 ,语法 如 下 : 











变量 =$_sESSION["Session 名 称 ""] 


为 了 验证 Session 变量 能 被 网 站 中 所 有 网 页 读 取 ,可 新 建 两 个 文件 (或 更 多 ), 在 
9-10. php 中 用 Session 变量 存储 信息 ,在 9-11. php 中 读 取 Session 变量 信息 。 代 码 如 下 :， 


------------------- 清单 9 10.phbp-------------------------- 
<? session start(); // 开 启 session 

$_SESSION["usemame"]=" 小 泥巴 "; // 将 字符 串 信 息 存 人 session 
$_SESSICN["usemame"]=" 张 三"; // 修 改 session 变量 值 

$_SESSICN["age"]= 21; 

Semail= "tang@ 163.com'; 

$_SESSION["email"]= $email; // 将 变量 信息 存 人 session 变量 
$_SESSICN["user"]=array('nane'=> 节 子 "pwd=> '11'); /将 数组 存 人 Session 变量 
> 

------------------- 清单 9 11.bhbpr---------- 一 ------------ 
<? session start (); // 开 启 Session 

echo $_SESSION["username"]; // 和 输出 * 张 三 ” 

echo $_SESSION ["age"]; // 输 出 21 


echo $_SESSION["email"]; > 

测试 时 首先 运行 9-10. php 写 入 Session 变量 ,再 在 同一 个 浏览 器 中 输入 9-11. php 的 
网 址 , 读 取 Session 变量 信息 , 则 9-11. php 的 运行 结果 如 下 : 

张 三 21tang@ 163-cam 

这 样 就 实现 了 通过 Session 变量 在 不 同 页 面 间 传 递 数据 。 

说 明 : 

(1) session_start() 函数 前 面 不 能 有 任何 代码 输出 到 浏览 器 ,最 好 加 在 页 面 头 部 ,或 
先 用 ob_start() 函数 打开 输出 缓冲 区 。 
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(2) 对 一 个 不 存在 的 Session 变量 赋值 ,将 自动 创建 该 变量 ;给 一 个 已 经 存在 的 
Session 变量 赋值 ,将 修改 其 中 的 值 。 

(3) 如 果 新 打开 一 个 浏览 器 ,去 访问 9-11. php; 则 无 法 获取 Session 信息 。 因 为 新 开 
一 个 浏览 器 相当 于 一 个 新 的 用 户 在 访问 。 

(4) 只 要 创建 了 Session 变量 ,该 Session 变量 就 能 被 网 站 中 所 有 页 面 访问 ,因此 网 站 
中 任何 页 面 (包括 9-10. php 自身 ) 都 能 读 取 9-10. php 创建 的 Session 变量 信息 。 

提示 : 在 电子 商务 网 站 中 常 利 用 Session 实现 “购物 车 ”, 用 户 在 一 个 页 面 中 加 入 购物 
车 的 商品 信息 在 转 到 另 一 个 页 面 后 仍然 存在 ,这 样 用 户 可 以 在 不 同 页 面 选择 商品 。 所 有 
商品 的 id、 价格 等 信息 都 保存 在 相应 的 Session 变量 中 ,直到 用 户 去 收银 台 交 款 或 清空 购 
物 车 时 Session 变量 中 的 数据 才 被 清除 。 由 于 服务 器 会 为 每 个 用 户 建 立 一 个 独立 的 
Session 对 象 , 因 此 每 个 用 户 都 有 一 辆 专用 的 “购物 车 ”。 


9.3.2 Session 的 创建 过 程 和 有 效 期 
1. Session 的 创建 和 使 用 过 程 





当 用 户 请 求 网 站 中 任意 一 个 页 面 时 , 若 用 户 尚未 建立 Session 对 象 (如 第 一 次 访问 )， 
则 服务 器 会 自动 为 用 户 创建 一 个 Session 对 象 ( 它 包 含 唯 一 的 Session ID 和 其 他 Session 
变量 ) ,并 保存 在 服务 器 内 存 中 ,不 同 用 户 的 Session 对 象 存储 着 各 自 特定 的 信息 ， 

服务 器 将 Session ID 发 送 到 客户 端 浏览 器 ,而 浏览 器 则 将 该 Session ID 保存 在 会 话 
Cookies 中 。 当 浏览 器 再 次 向 服务 器 发 送 HTTP 请 求 时 ,会 将 Session ID 信息 一 起 发 送 
给 服务 器 。 服 务 器 根据 该 Session ID 查找 到 对 应 的 Session 对 象 ,就 能 识别 出 用 户 。 这 
将 有 利于 服务 器 对 用 户 身 份 的 鉴别 ,从 而 实现 Web 页 面 的 个 性 化 。 

注意 区 分 Session 对 象 和 Session 变量 ,对 于 每 个 网 站 的 访问 者 来 说 ,网 站 都 会 为 其 
建立 一 个 Session 对 象 ,该 Session 对 象 中 有 一 个 Session ID。 如 果 程 序 中 没有 创建 
Session 变量 的 代码 ,那么 每 个 用 户 的 Session 对 象 中 只 含有 Session ID ,和 否则 ,该 Session 
对 象 中 还 包含 许多 个 Session 变量 ,如 图 9-12 所 示 。 也 就 是 说 ,每 个 用 户 都 有 一 个 独立 的 
Session 对 象 ,每 个 用 户 可 以 有 0 个 到 多 个 独立 的 Session 变量 。 














Session 对 象 


Session 变 量 2 Session 变 量 3 3 


图 9-12 Session 对 象 和 Session 变量 的 关系 示意 图 
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下 面 的 程序 使 用 session_id() 函 数 返 回 用 户 的 Session ID 值 。 这 验证 了 即使 没有 创 
建 Session 变量 ,用户 仍 然 会 拥有 一 个 Session ID。 


<? session start()7 


var dnp($ SESSION); /输出 array(0) { }, 因 为 没有 创建 sessicn 变量 
echo session id(); /| 输出 04c41641c2632c491c4d77d5898c0aa3 
> 


提示 : session_id() 函数 既 可 以 获取 当前 Session ID 值 , 也 可 以 设置 Session ID 值 , 如 
session_idCabc123) ,此 时 必须 在 session_start() 函 数 调 用 之 前 使 用 。 

最 好 不 要 把 大 量 的 信息 存 人 到 Session 变量 中 ,或 者 创建 很 多 个 Session 变量 。 因 为 
Session 对 象 是 要 保存 在 服务 器 内 存 中 的 ,而 且 要 为 每 一 个 用 户 单独 建立 一 个 Session 对 
象 ,如 果 保存 的 信息 太 多 ,同时 访问 网 站 的 用 户 又 很 多 , 则 如 此 多 的 Session 对 象 是 非常 
占用 服务 器 资源 的 。 


2. Session 的 生命 期 


Session 对 象 的 生命 期 是 指 从 用 户 在 Session 有 效 期 内 第 一 次 访问 网 站 直到 不 再 访 
问 网 站 为 止 的 这 段 时 间 。 即 一 个 Session 开始 于 用 户 打 开 这 个 网 站 中 的 任意 一 个 网 页 之 
时 ;结束 于 用 户 不 再 访问 这 个 站 点 的 那 一 刻 , 包 括 Session 超时 或 主动 删除 Session 两 种 
情况 。 

注意 : 不 再 访问 这 个 站 点 天 关闭 浏览 器 。 

关闭 浏览 器 并 不 会 使 一 个 Session 结束 ,因为 服务 器 并 不 知道 用 户 关闭 了 浏览 器 ,但 
会 使 这 个 Session 永远 都 无 法 访问 到 。 因 为 当 用 户 再 打开 一 个 新 的 浏览 器 窗口 又 会 产生 
一 个 新 的 Session 。 


3. 设置 Session 的 有 效 期 


Session 对 象 并 不 是 一 直 有 效 的 , 它 有 个 有 效 期 ,默认 为 24 分 钟 (1 440 秒 ) 。 如 果 客 
户 端 超过 24 分 钟 没 有 刷新 网 页 或 访问 网 站 中 的 其 他 网 页 , 则 该 Session 对 象 就 会 自动 结 
东 。 不 过 可 以 修改 Session 对 象 的 默认 有 效 期 ,一 种 方法 是 在 PHP 的 配置 文件 php. ini 
中 修改 系统 默认 值 (session. gc_maxlifetime 王 1440) , 另 一 种 方法 是 利用 ini_set() 方 法 更 
改 Session 对 象 的 默认 有 效 期 ,代码 如 下 : 

Session start(); 

ini set('session.save path','/trmp/'); // 设 置 保存 路 径 

ini_set('session.gc maxlifetime', 60); // 保 存 1 分 钟 

Setcookie (session name(), session id(), time()+60, "/"); 

// 设 置 会 话 cookie 的 过 期 时 间 

提示 : 

(1) 虽然 增加 Session 的 有 效 期 有 时 能 方便 用 户 访问 ,但 这 也 会 导致 Web 服务 器 内 
存 中 保存 用 户 Session 信息 的 时 间 增 长 ,如 果 访 问 的 用 户 很 多 ,会 加 重 服务 器 的 负担 。 
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SSW.,. 页 设计 与 PHP 
(2) 不 能 单独 对 某 个 用 户 的 Session 设置 有 效 期 。 


9.3.3 利用 Session 限制 未 登录 用 户 访 问 


网 站 中 有 些 页 面 要 求 只 有 登录 成 功 的 用 户 才 能 访问 ,如 网 站 后 台 管 理 页 面 。 利 用 
Session 可 实现 这 种 需求 。 具 体 方法 是 : 在 用 户 输入 的 用 户 名 和 密码 验证 通过 后 ,用 
Session 变量 存储 某 些 特征 信息 (如 用 户 名 ) ,这 个 Session 变量 就 相当 于 “ 票 ”, 然 后 在 其 
他 对 安全 性 有 要 求 的 页 面 最 前 面 检查 这 些 Session 变量 是 否 存在 ( 即 验 票 ) ,如果 这 些 特 
征 值 为 空 , 表 示 没 有 经 过 合法 认证 ,是 通过 直接 输入 网 页 的 网 址 进入 的 ,就 拒绝 其 访问 。 
示例 代码 如 下 。 





<? session start(); 
if(isset($_POST["stbmit"])) {  ”// 判 断 是 否 单 击 了 登录 按钮 
$user=$_POST["userName"]; 
S$Ew=$_POST["PW"]; 
if ($user=="admin" &&$pw== "123'){ // 判 断 用 户 名 密码 是 否 正 确 
$_SESSICN['user']= $user; // 将 用 户 名 存 人 $_SsEssToN['ruser'], 这 是 关键 
header ('Ipcation:9- 15.php');} 
else ”echo "用 户 名 或 密码 错误 "; 
} 
else echo' 
< fom method= "post" action= ""> 
用 户 名 : < input type= "text" name= "userName" /> 
密 码 : < input type= "password" name= "PW" /> 
< input name= "submit" type= "suiomit" value= "登录 " /> 
< /form> '; > 


<? session start(); 
if(isset ($_SESSION['user'])) // 如 果 $_SEssToN['"user'] 不 为 空 
echo "欢迎 您 ，,".$_sESSION["user"] ."<br/> 
<a href= '9- 16.bhp?action= logout'> 注 销 < /a> "; 
else 
echo 味 登 录用 户 不 允许 访问 "; > 


程序 运行 效果 是 : 如 果 用 户 没有 经 过 9-12. php 页 面 登录 或 登录 失败 ,而 是 直接 运行 
9-13. php ,就 会 提示 “未 登录 用 户 不 允许 访问 ;如 果 在 9-12. php 登录 成 功 过 , 则 以 后 每 
次 运行 9-13. php 都 会 显示 欢迎 信息 。 

说 明 : 

(1) 该 实例 必须 先 运行 9-12. php, 以 对 登录 成 功用 户 赋 予 $ _SESSION['user]] 变 量 ， 
而 9-13. php 用 来 检查 该 Session 变量 是 否 为 空 ,请 注意 9-13. php 中 并 没有 采用 
$ _POST 获取 表单 变量 ,而 是 读 取 和 输出 9-12. php 中 创建 的 Session 变量 。 

(2) 9-12. php 中 创建 的 Session 变量 可 以 被 网 站 中 的 所 有 网 页 访问 。 因 此 可 以 将 
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9-13. php 中 的 代码 放 到 网 站 中 所 有 对 安全 性 有 要 求 的 网 页 的 最 前 面 。 
9.3.4 删除 和 销毁 Session 


删除 Session 常用 来 实现 用 户 注 销 的 功能 ,使 得 用 户 能 够 安全 退出 网 站 。 在 PHP 
中 ,使 用 unset() 方 法 可 以 删除 单个 session 变量 。 使 用 session_unset() 函 数 可 删除 当前 
内 存 中 $_SESSION 数组 中 的 所 有 元 素 , 它 等 价 于 $_SESSION 王 array() 或 unset($_ 
SESSION) 。 例 如 ， 





<? session start(); 

inset ($_SESSICN["username"]); /删除 $_SsEssTCN 中 一 个 session 变 量 
session unset (); /删除 $_sEssTcN 中 所 有 sessicn 变量 
> 


但 是 ,session_unset 只 能 删除 $_SESSION 数组 中 的 所 有 元 素 , 并 不 能 删除 对 应 的 
Session ID ,也 不 能 删除 保存 Session ID 的 文件 。 而 session_destroy() 函数 就 能 删除 
Session ID ,并 销毁 Session 文件 ,但 它 不 会 删除 内 存 中 的 $_SESSION 数组 中 的 所 有 元 
素 。 例 如 : 


<? session start()7 
echo '<P> 这 个 用 户 的 Session 编 号 为 '.session id(0).'</p> 
$_SESSION["user namer]= " 吊 什 几 
Session destroy(); // 清 除 session 到 
echo '<P> 这 个 用 户 的 session 编号 为 '.session id(0).'</p> 9 
echo $_SESSIOCN["user_name"]; // 会 输出 "布什 " 


这 个 用 户 的 session 编 号 为 43abc321fc0e76486f32dd86fabde568 

这 个 用 户 的 session 编 号 为 

布什 

因此 ,如 果 要 彻底 删除 Session, 实 现 用 户 安全 注销 功能 ,可 以 将 session_unset() 与 
session_destroy() 函数 结合 使 用 ,并 且 还 需 清除 浏览 器 中 的 会 话 Cookie 信息 ,这 可 以 通 
过 调用 setcookie 函数 将 会 话 Cookie 设置 为 过 期 即 可 。 下 面 是 一 个 注销 用 户 登 录 的 
例子 。 


--------------------- 清单 9 14.php----------------------- 

<? 

if($_ GaT['action']== "ogout") { 

session start(); // 启 动 会 话 

Setcookie (“User",™,time()- 60)7 /将 会 话 cockie 变 量 user 设 置 为 过 期 , 即 删除 cookie 
Session unset ()7 // 删 除 $_SEssToN 中 的 sessicn 变量 


session destroy(); /| 销毁 session, 删除 session ID 
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heager ("Tocation:9 14.php"); // 回 到 登录 界面 
> 





9.4 使 用 $_COOKIE 读 取 Cookie 


使 用 Session 只 能 让 网 站 记 住 当前 正在 访问 的 用 户 , 但 有 时 网 站 还 需要 记 住 曾经 访 
问 过 的 用 户 ,以 便 在 用 户 下 次 访问 时 ,提供 个 性 化 的 服务 。 这 就 需要 用 到 Cookie 技术 。 
Cookie 能 为 网 站 和 用 户 带 来 很 多 好 处 ,比如 它 可 以 记录 特定 用 户 访 问 网 站 的 次 数 、 最 后 
一 次 访问 时 间 、 用 户 在 网 站 内 的 浏览 路 径 , 以 及 使 登录 成 功 的 用 户 下 次 自动 登录 等 。 

也 有 一 些 Cookie 的 高 级 应 用 ,如 在 购物 网 站 浏览 商品 页 面 时 ,该 网 站 程序 可 以 将 用 
户 的 浏览 历史 记录 到 Cookie 中 , 当 用 户 下 次 再 访问 时 ,网 站 根据 用 户 过 去 的 浏览 情况 为 
用 户 推荐 感 兴趣 的 内 容 。 

Cookie 实际 上 是 一 个 很 小 的 文本 文件 ,网 站 通过 向 用 户 硬盘 中 写 和 人 一 个 Cookie 文 
件 来 标识 用 户 。 当 用 户 下 次 再 访问 该 网 站 时 ,浏览 器 会 将 Cookie 信息 发 送 给 网 站 服务 
器 ,服务 器 通过 读 取 以 前 写 入 的 Cookie 文件 中 的 信息 ,就 能 识别 该 用 户 。 

Cookie 有 两 种 形式 : 会 话 Cookie 和 永久 Cookie。 前 者 是 临时 性 的 ,只 在 浏览 器 打开 
时 存在 (存储 在 用 户 机 器 的 内 存 中 ) ,主要 用 来 实现 Session 技术 ;后 者 则 永久 地 存放 在 用 
户 的 硬盘 上 并 在 有 效 期 内 一 直 可 用 。Cookie 文件 默认 保存 在 “C:\Documents and 
Settings\ 登 录用 户 名 \Cookies” 文 件 夹 中 。 

在 PHP 中 ,利用 setcookie() 函 数 可 以 创建 和 修改 Cookie, 以 及 设置 Cookie 的 有 效 
期 ;而 使 用 $_COOKIE[L] 数 组 可 以 读 取 Cookie 变量 的 值 。 


9.4.1 创建 和 修改 Cookie 
创建 Cookie 最 简单 的 方法 是 使 用 setcookie() 函 数 。 语 法 如 下 : 


setoookie (name, value, expire, path, domain, secure) 


其 中 ,name 用 来 定义 一 个 cookie 的 变量 名 ,value 用 来 设置 Cookie 变量 值 ,expire 用 
来 定义 Cookie 的 有 效 期 ;而 path、domain、secure 分 别 用 来 规定 Cookie 的 有 效 目 录 、 有 效 
域名 和 是 否 采用 HTTPS 来 传输 Cookie, 这 三 个 参数 不 常用 。 除 了 name 和 value 是 必需 
的 参数 外 ,其 他 参数 都 是 可 选 的 。 

下 面 是 一 个 创建 Cookie 的 程序 : 


--------------------- 清单 9 15.bhp-------------------------- 
setcockie('tmpoookie' ' 这 是 个 临时 cookie'); ”// 不 设置 过 期 时 间 
setcookie(ruserName' ' 小 泥巴 ',time()+ 60); // 设 置 过 期 时 间 为 @ 秒 ,永久 cookie 
setcookie ('age',21,time ()+ 60); 

setcookie('sex',' 女 ',time()+60,'","" false); ”// 设 置 setoookie 的 所 有 参数 


> 
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上 例 中 设置 了 4 个 Cookie 变量 ,变量 名 分 别 为 tmpcookie .userName age 和 sex。 其 
中 tmpcookie 没有 设置 过 期 时 间 , 因 此 它 仅仅 是 个 会 话 Cookie, 会 话 Cookie 并 没有 保存 
到 文本 文件 中 ,关闭 浏览 器 后 ,tmpcookie 将 立即 失效 。 而 其 他 3 个 Cookie 均 设置 了 过 期 
时 间 , 因 此 是 永久 Cookie, 它 们 将 在 关闭 浏览 器 1 分 钟 后 失效 。 

要 查看 9-15. php 写 人 的 Cookie 文件 ,可 以 打开 保存 在 “C:\Documents and Settings 
\ 登 录用 户 名 \Cookies” 目 录 下 的 Cookie 文件 ,文件 内 容 如 图 9-13 所 示 。 








本 CAEJOT2B. txt - 记事 本 =I9|x| 
文件 到 ) 二 格式 @) 查看 名 帮助 如 





图 9-13 客户 端 Cookie 文件 中 的 信息 


由 此 可 见 , 永 久 Cookie 变量 均 保存 在 了 客户 端的 Cookie 文件 中 ,而 会 话 Cookie 没 
有 保存 。Cookie 变量 名 和 变量 值 中 如 果 含 有 中 文 或 特殊 字符 ,会 自动 经 urlencode() 函数 
处 理 转换 成 gb2312 编码 形式 。 

如 果 要 修改 Cookie 变量 的 值 ,可 以 用 setcookie() 函 数 给 变量 重新 赋值 。 例 如 : 


setoookie ('age',24, time ()+ 60); // 将 cookie 变量 age 的 值 修改 为 24 


但 修改 Cookie 时 设置 过 期 时 间 的 参数 不 能 省 略 ,否则 该 Cookie 会 被 修改 成 临时 Cookie。 

提示 : 

(1) 在 使 用 setcookie() 函 数 前 ,不 要 有 任何 HTML 内 容 输 出 到 浏览 器 ,因为 Cookie 
也 是 作为 HTTP 协议 头 的 一 部 分 ,否则 setcookie() 创 建 Cookie 将 失败 。 

(2) Cookie 变量 的 值 总 是 字符 串 数 据 类 型 。 

(3) 在 PHP 中 ,还 能 使 用 header 函数 设置 Cookie。 例 如 : 

header ("Set- Cookie: nicmame= 小 泥巴 ; expires=". gmstrftime ("%A, $d- $b- %Y %H: 

%M:%S GMI™", time()+ (86400 * 30))); 

其 中 nickname 是 Cookie 变量 名 小 泥巴 ”是 Cookie 变量 值 ,expires 用 来 设置 过 期 
时 间 。Set-Cookie 参数 和 expires 参数 之 间 用 “;” 号 隔 开 。 


9.4.2 读 取 Cookie 


在 客户 端 写 人 Cookie 后 , 当 用 户 再 次 向 网 站 发 送 HTTP 请 求 时 ,就 会 将 Cookie 信 
息 放 在 HTTP 请 求 头 中 一 起 发 送 给 服务 器 ,服务 器 会 自动 获取 HTTP 请 求 头 中 的 
Cookie 信息 ,并 将 这 些 信息 保存 到 $_COOKIE 数组 中 。 因 此 通过 $_COOKIE 可 以 读 取 
所 有 从 客户 端 传 过 来 的 Cookie 信息 。 下 面 的 程序 用 来 读 取 9-15. php 中 创建 的 Cookie 
信息 。 
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$user=$ COOKIE["'userName']; 
$age=$_OO0KIE['age']; 

$sex=$_ COOKIE['sex']; 

echo $user.$age.' 岁 ,性 别 '.$sex; > 


为 了 测试 该 程序 ,首先 运行 9-15. php 创建 Cookie, 再 运行 9-16. php 读 取 Cookie, 则 
9-16. php 的 运行 结果 如 下 : 


小 泥巴 和 2 岁 ,性 别 女 


说 明 : 由 于 Cookie 存放 在 了 硬盘 中 ,因此 即使 重启 电脑 后 ,再 打开 浏览 器 访问 
9-18. php 也 能 读 取 到 Cookie( 只 要 Cookie 没 过 期 ) 。 


9. 4.3 ”Cookie 数组 
实际 上 ,使 用 setcookie() 函 数 还 可 以 创建 Cookie 数组 。 例 如 : 





<? 
setcookie ("user[name]"," 张 三",time()+ 600); 
setoookie ("user[igd]", "zhang3", time ()+ 600)7 
setcookie ("user[sex]"," 男 ",time ()+ 600); 
Setcookie ("user [age]",23); > 


创建 Cookie 数组 时 ,对 于 数组 元 素 的 索引 可 以 是 整数 或 字符 串 ,但 索引 两 边 不 要 用 
引号 (如 user[id] 不 能 写成 user['id]) ,因为 PHP 会 自动 给 setcookie 中 的 数组 索引 加 
引号 。 

要 读 取 Cookie 数组 ,可 使 用 循环 语句 遍历 数组 ,也 可 单独 输出 数组 元 素 。 代 码 如 下 : 


妆 
foreach($ OOOKIE["'user'] as$key=> $value){ 
echo $key.'=>'.$value.' ';} // 输 出 cookie 数 组 中 所 有 元 素 
Var dmp($ OOoKIE); /输出 $_cooKIE 中 的 所 有 内 容 


echo $ CooKIE['user'] ['name']; // 输 出 cookie 数 组 中 一 个 元 素 


2> 
运行 结果 如 下 (必须 先 运行 创建 Cookie 数组 的 程序 ): 


name=> 张 三 i 中 >zhang3 sex=> 男 age=>23 张 三 


9.4.4 删除 Cookie 


有 时 用 户 可 能 希望 网 站 不 再 记 住 自己 过 去 访问 的 信息 ,这 时 可 以 删除 Cookie。 删 除 
Cookie 有 两 种 方法 : 一 是 将 Cookie 的 变量 值 设置 为 空 , 并 且 不 设置 有 效 期 (不 设置 有 效 
期 将 删除 Cookie 文件 中 的 Cookie 变量 ); 二 是 将 Cookie 的 有 效 期 设置 为 过 去 的 某 个 时 
间 。 无 论 使 用 哪 种 方法 ,浏览 器 接收 到 这 样 的 Cookie 响应 头 信息 后 ,将 自动 删除 用 户 硬 
盘 中 的 Cookie 文件 和 内 存 中 的 Cookie 信息 。 例 如 ,下 面 程序 的 功能 是 将 9-15. php 中 创 
建 的 Cookie 全 部 删除 。 
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<? 

setcookie (ruserName' ''); /删除 cookie 的 方法 1 

setcookie ('age',21, time ()- 600); // 删 除 cookie 的 方法 2 

setcookie('sex', ' 女 ',time()- 600); 

var dmp($_ COOKIE); // 用 来 查看 上 述 cookie 数 组 元 素 是 否 已 经 删除 
ww 


9.4.5 ”Cookie 程序 设计 举例 


如 果 要 编写 Cookie 应 用 的 程序 ,一 般 的 流程 是 : 首先 尝试 获取 某 个 Cookie 变量 ,如 
果 有 , 则 表明 是 老 客户 , 读 取 其 Cookie 信息 ,为 其 提供 个 性 化 的 服务 ;如 果 没有 , 则 表明 是 
第 一 次 来 访 的 新 客户 ,通过 表单 获取 其 身份 信息 ,再 将 这 些 信 息 存 和 到 Cookie 变量 中 去 。 


1. 用 户 自动 登录 
用 户 自动 登录 程序 的 实现 流程 如 图 9-14 所 示 。 


获取 Cookie 变 量 















































有 + 1 没有 
显示 登录 成 功 界面 显示 用 户 登录 要 
若 要 记录 用 户 登录 
时 间或 次 数 0 
1 
修改 Cookie 变 量 写 入 Cookie 变 量 
上 下 次 可 自动 登录 





图 9-14 用 户 自动 登录 程序 的 一 般 流程 图 


在 下 面 的 实例 中 ,如 果 用 户 第 一 次 访问 9-17. php, 则 会 显示 如 图 9-15 所 示 的 登录 表 
单 , 如 果 用 户 登 录 成 功 并 选择 了 保存 Cookie, 则 以 后 再 次 访问 9-17. php 时 就 不 需要 登录 ， 
会 自动 转 到 欢迎 界面 ( 见 图 9-16) ,并 显示 用 户 的 访问 次 数 和 上 次 登录 时 间 。 该 实例 包括 
两 个 文件 ,其 中 9-17. php 是 主 程序 ,9-18. php 用 于 获取 表单 信息 并 写 入 Cookie 等 ,代码 
如 下 : 


< 
if($ COCKIE["user"] [an"]< > "™) { /| 尝试 获取 指定 的 cookie 变量 ,如 果 有 
Svisnue intval ($ O00KIE["user"]["mmum")+1; ”// 将 原来 的 访问 次 数 加 1 
$expire=intval($ COCKIE["user"] ["expire"]);  // 获 取 有 效 期 
// 将 本 次 访问 时 间 写 入 cockie 
setcookie ("user[dt]",date ("Y_m- d h:i:s") ,time ()+ 3600* $expire); 
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setcookie ("user mum] ", $visnum, time ()+ 3600x $expire); 
/将 本 次 访问 次 数 写 入 cookie 
echo" 欢 迎 您 :".$_O0CKIE["user"] ["an"]; /| 输出 cookie 变 量 的 值 
echo <br/> 这 是 您 第 ".$vismm. 吹 访问 本 网 站 "; 
echo <br/> 您 上 次 访问 是 在 ".$_Co0KIE["user"] ["dt"]; 





else // 没 有 cookie 则 显示 登录 表单 
echo '<html> <body> 
< div style= "border:1px solid #06f; background:#bbdeff"> 
< fom method= "post" action= "9- 20.bhp" style= "margin:4rx;"> 
< 户 账 号 :< input name= "wa" type= "text" size= "12"> < /p> 
< 户 密 码 :< input name= "Pwd" type= "password" size= "12"> < /p> 
< 户 保 存 :< select name= "Save"> 
<option value="-1"> 不 保存 < /cption> 
< option value= 7"> 保 存 1 周 < /option> 
<option value= "30"> 保 存 1 月 < /option> < /select> 
<input type= "suhmit" value=" 登 录 吃 < /p> 
< /fom> < /div> < /body> < /html>"' > 





<? if($ POST["m"]=="admin" &&$ POST["Pwd"]=="123") { 
setoookie ("user [xm]",$_POST["zm"] ,time ()+ 3600* intval ($_ POST['Save'])); 
setcookie ("user[dt]",date("Y-m- d h:i:s") ,time ()+ 3600* $expire); 
// 写 人 cookie 
Setcookie ("user[num] "1lvtime ()+ 3600* intval ($_ POST['Save'])); 
/保存 有 效 期 到 cockie 
setcookie ("user [expire]",$_PosT['Save'],time ()+ 3600x intval 
($_POST['Save'])); 
echo $_POST["xam"] .": 首次 光临 "; 
//Nar dmp($ COOKIE); } 
else 
echo "< script> alert(' 用 户 名 或 密码 不 对 ')) ;location.href- '9- 17.php '; 
< /script> "; 
> 


EE ET lolxil 
[4 


逢 http://1ocalhost/Cookies 一 


这 是 您 第 8 次 访问 本 网 站 
您 上 次 访问 是 在 2011-2-12 
20:51:20 





图 9-15 9-17. php 的 第 一 次 运行 结果 图 9-16 9-17. php 登录 成 功 后 
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2. 记录 用 户 的 浏览 路 径 


在 电子 商务 网 站 中 ,经常 需要 记录 用 户 的 浏览 路 径 , 以 判断 用 户 对 哪些 商品 特别 感 兴 
趣 或 哪些 商品 之 间 存 在 销售 关联 。 下 面 的 例子 使 用 Cookie 记录 用 户 浏览 过 的 历史 页 面 。 
该 网 站 将 每 个 页 面 的 标题 保存 在 该 页 面 的 $ title 变量 中 ,用 户 每 访问 一 个 页 面 就 会 将 新 
访问 页 面 的 标题 添加 到 Cookie 变量 $_COOKIE[L"history"] 值 中 。 随 着 用 户 访问 页 面 的 
增多 ,该 Cookie 变量 中 保存 的 含有 页 面 标题 的 字符 串 会 越 来 越 长。 将 该 Cookie 变量 切 
分 成 数组 ,然后 输出 数组 元 素 的 值 就 输出 了 用 户 最 近 访 问 页 面 的 标题 列表 。 


<? cb start();  // 打 开 缓 冲 区 ,以 便 在 有 输出 后 还 能 设置 cookie 
Stitle= "西游 记 " // 商 品 页 有 很 多 ,其 他 商品 页 的 title 是 水 浒 传 .西游 记 等 ?> 
<html><head> 
<titlez<2-Stitle ?</titley </head> 
<body> <h3 align= "oanter"”>< 关 $title > 商品 页 面 < /h3> 
<p> 同 类 商品 :<a href= "him.pghp"> 红 楼 梦 < /a><a hre 全 "shz.pghp"> 水 浒 传 < /a> 
<a hre 全 "sg.php"> 三 国 演义 </a>< /p> 
<? require("9- 20.php") > 


< /body> < /htm> 
SS 清单 9- 20.Ehe( 商 品 页 调用 的 记录 浏览 历史 的 程序 )- ----- 
< 鸡 history- $_COCKIE ["history"]; // 获 取 记 录 浏 览 历 史 的 cookies 
if($history=="") // 如 果 浏 览 历史 为 空 
$pathe $title; // 将 当前 页 的 标题 保存 到 path 变 量 中 
else 
$path= $title."/".$history; // 将 当前 页 的 标题 加 到 浏览 历史 的 最 前 面 


// 将 $path 保存 到 cookie 变 量 中 ,设置 过 期 时 间 为 30 天 
setcookie ("history", $path, time ()+ 30x 3600); 
$arrPath= explode ("/", $path); // 将 $path 分 割 成 一 个 数组 $arrPath 
echo "您 最 近 的 浏览 历史 :<hr/>"; 
foreach ($arrPath as$key=> $value) { 
if ($key> 9) break; // 只 输出 最 近 的 10 条 
echo ($keyt 1) .". ".$value ."<br/>"; // 输 出 浏览 历史 
]> 


说 明 : 测试 时 应 首先 将 9-19. php 重 命名 成 几 
个 文件 (xyj. php .shz. php .hlm. php、sg. php) ,然后 
将 这 几 个 文件 第 2 行 中 的 $title 变量 值 分 别 改 成 
“水 浒 传 ”“ 西 游记” 和 “三 国 演义 ”。 接 下 来 运行 其 
中 任何 一 个 文件 ,再 通过 单 击 链接 转 到 其 他 文件 ， | 您 吕 近 的 浏览 历史 ; 
会 发 现 每 浏览 一 个 页 面 , 它 的 标题 就 会 记录 到 浏览 
历史 中 ,如 图 9-17 所 示 ,而 且 关闭 浏览 器 后 再 打开 ， 
浏览 历史 依然 不 会 丢失 ,从 而 基本 实现 了 保存 用 户 ”图 9-17 9-19. php 的 运行 结果 


EE ELE ST 








红楼 梦 商 品 页 面 
同类 商品 ， 西 游记 水 洲 传 三 国 ; 
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浏览 历史 的 目的 。 

当然 ,在 实际 的 电子 商务 网 站 中 ,记录 浏览 历史 还 会 将 用 户 的 浏览 历史 保存 到 服务 器 
的 数据 库 中 ,那样 浏览 历史 能 更 长 久 地 保存 ,网 站 还 能 根据 所 有 用 户 的 浏览 历史 进行 数据 
分 析 和 统计 。 


9.5 使 用 $_FILES 获取 上 传 文件 信息 


文件 上 传 是 网 站 程序 的 一 项 基本 功能 ,例如 有 些 网 站 允许 用 户 上 传 图 片 文件 .上 传 文 
档 (Word 或 PPT) 等 。PHP 可 轻松 实现 将 本 地 文件 上 传 到 Web 服务 器 的 功能 。 

在 PHP 中 ,文件 上 传 功能 的 实现 步骤 为 : 

(1) 在 网 页 中 添加 文件 上 传 表单 , 单 击 * 上 传 ? 按 钮 后 ,选择 的 文件 数据 将 发 送 到 服 
务 器 ; 

(2) 用 $_FILES 获取 与 上 传 文件 有 关 的 各 种 信息 ; 

(3) 用 文件 上 传 处 理 函 数 对 上 传 文件 进行 后 续 处 理 。 


9.5.1 添加 上 传 文件 的 表单 


在 HTML 中 ,可 以 使 用 表单 中 的 文件 上 传 域 来 提交 要 上 传 的 文件 。 下 面 是 一 个 上 
传 文件 的 HTML 表单 代码 , 它 在 浏览 器 中 的 显示 效果 如 图 9-18 所 示 。 





<h3 align= "oenter"> 上 传 文件 的 演示 实例 < /h3> 

<BE> 请 选择 要 上 传 的 jpg 图 片 文 件 < /> 

< fom action= "9- 22.php" method= "post" enctype= "mltipart/form data"> 
< input type= "file" name= "upfile" /><br> <br> 
< input type= "submit" value=" 上 传 " /> 

< /fom> 


pe 汉文 件 上 传 功能 演示 - icresoE 评 [a3| 
a 如 果 表 单 中 有 文件 上 传 域 , 则 定义 表单 FE SS 和 
时 必须 设置 enctype = 二" multipart/form-data"， 十 直面 | 铬 hp//1ocahost/pto/e/ 加 用 并 天 | 


method 属性 必须 设置 为 post( 这 是 因为 get 方式 发 上 传 文件 的 演示 实例 
送 的 数据 量 不 能 超过 8KB) 。action 一 "9-22. php" 表 
示 上 传 的 数据 将 发 送 给 9-22. php ,因此 9-22. php 是 





请 选择 要 上 传 的 jpg 图 片 文件 

处 理 上 传 文件 的 脚本 。 ES 
提示 : 如 果 要 限制 上 传 文件 的 大 小 ,可 以 在 表 “| 基于 

单 中 添加 一 个 隐藏 域 : 过 input type 二 "hidden" 

name 一 "MAX_FILE_SIZE" value 一 "10240" 二 ,并 

且 该 隐藏 域 必 须 放 在 文件 上 传 域 的 前 面 ,否则 会 设置 失效 。 





图 9-18 上 传 文件 的 网 页 9-21. php 
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9.5.2 使 用 $_FILES 获取 上 传 文件 信息 


当 用 户 单 击 * 上 传 ”按钮 后 ,上 传 的 文件 数据 将 发 送 给 服务 器 。 在 处 理 脚本 9-22. php 
时 ,可 以 使 用 $ _FILES 来 获取 上 传 文件 的 信息 。$ _FILES 是 一 个 多 维 数组 , 它 可 以 保 
存 所 有 上 传 文件 的 信息 ,以 及 上 传 过 程 中 的 错误 信息 。 如 果 文件 上 传 域 的 name 属性 值 
为 upfile, 则 可 以 使 用 $ _FILESL'upfile 来 访问 上 传 文件 的 有 关 信 息 。$ _FILESL'upfile"] 
是 一 个 一 维 数组 ,数组 元 素 是 上 传 文件 的 各 种 属性 ,具体 如 下 : 

$ _FILES['upfile' [name!'] 客户 端 上 传 文件 的 原名 称 (不 包括 路 径 )。 

$ _FILES['upfile'] ['type'] 上 传 文件 的 MIME 类 型 ,如 image/gif 等 。 

$_FILESLupfile] [size] 已 上 传 文件 的 大 小 ,单位 是 字 节 。 

$ _FILES[L'upfile] [+mp_name'] 上 传 文件 在 服务 器 端 保存 的 临时 文件 名 (包含 
路 径 名 ) 。 

$_FILESLUupfileJ] [errozo] 一 一 上 传 文件 出 现 的 错误 号 ,是 一 个 整数 。 

我 们 可 以 在 9-22. php 中 输入 如 下 代码 ,来 输出 $_FILESLupfile] 数 组 的 内 容 。 














<? var dmp($ FIIES["upfile']); ?> 
选择 上 传 文件 guangxue. gif, 单 击 上 传 按钮 后 ,执行 结果 如 下 。 


array (5) {["name"]=> string(12) "guangae.gif" ["type"]=> string (9) "image/gif" ["trp name"]=> string 
(26) "C:\WINDONS\TEMP\phpl1C.trp" ["error"]=> int (0) ["size"]=> int (44863) } 


9.5.3 保存 上 传 文件 到 指定 目录 


通过 上 述 步 又, 上 传 文件 已 经 保存 在 了 C:\Windows\temp\ 目 录 下 ,文件 名 为 
phpllC. tmp。 接 下 来 ,必须 将 上 传 文件 移动 到 网 站 目录 下 的 指定 目录 中 ,并 为 它 重 命名 ， 
以 便 让 网 站 目录 内 的 网 页 可 以 引用 该 文件 。 

要 移动 文件 到 指定 目录 ,一 般 使 用 move_uploaded_file() 函 数 。 该 函数 的 语法 如 下 : 


move_uploaded file( 文 件 原来 的 路 径 和 文件 名 ,文件 的 目的 路 径 和 文件 名 ) 


提示 : 该 函数 还 提供 了 一 个 额外 的 功能 , 即 检查 并 确保 由 第 一 参数 指定 的 文件 是 合 
法 的 上 传 文件 ( 即 通 过 HTTP POST 上 传 机 制 所 上 传 的 ), 这 对 于 网 站 安全 是 至 关 重 要 
的 。 即 该 文件 包含 了 is_uploaded_file() 函 数 的 功能 。 

下 面 是 9-22. php 的 代码 。 该 程序 的 功能 是 将 上 传 的 临时 文件 移动 到 网 站 指定 目录 
内 ,并 为 它 重 命名 。 为 此 先 要 检查 指定 目录 是 否 存在 ,如 果 不 存在 , 则 创建 ,再 用 当前 时 间 
生成 文件 名 。 最 后 通过 $_FILES 获取 临时 文件 的 文件 名 作为 原文 件 名 ,就 可 以 用 move 
_uploaded_file() 将 临时 文件 移动 到 指定 目录 下 了 。 运 行 结果 如 图 9-19 所 示 。 


<? //$upload_ dir 是 上 传 文件 的 目录 ,getcwa0 可 获取 当前 脚本 所 在 目录 
$upload dir= getcwd() . \\inages\\"; // 即 “当前 目录 \images” 
if(lis dir($upload dir)) // 如 果 目 录 不 存在 , 则 创建 
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mdir ($upload dir); 
function makefilename() { // 此 函数 用 于 根据 当前 时 间 生 成 上 传 文件 名 
S$Scurtime= getdate (); // 获 取 当 前 系统 时 间 , 生 成 文件 名 
S$filename= $curtime['year'] .$curtime['mon'] .$curtime['mday'] .$curtime['hours'] .$curtime[' 
minutes'] .$curtime['seconds'] . ".jpg"; 
return $filename; // 返 回 生 成 的 文件 名 
} 
Snewfilename=makefilename ()7 
S$newfile= $upload dir .$newfilename; // 生 成 文件 路 径 名 加 文件 名 
if(file exists($ FIES['upfile']['tmp name'])) { 
// 如 果 这 个 临时 文件 存在 ,表明 上 传 成 功 
move_uploaded file($_FTIES["upfile'] ["bmp name'],$newfile); 
echo " 喀 户 端 文件 名 : " .$_FIES['upfile']['name'] . "<br>"; 
echo 咬 件 类 型 : ".$_FITES["'upfile']['type'].""; 
echo "大 小 : " .$_FIIES['upfile']['size'] . "守节 <br>"; 
echo "服务 器 端 临时 文件 名 : " .$_FHES["upfile']['tmp name'] . "<br>"; 
echo "上 传 后 的 文件 名 : " .$newfile . "<br>"; 
echo "文件 上 传 成 功 [<a hreE- 哗 " onclick= "history.go( 有)"> 继 续 上 传 < /a>] 
< 了 右边 是 上 传 的 图 片 文件 : 
< jmg src= "images/' .$newfilename .'">< /p> ';} // 用 img 标 记 显 示 上 传 的 图 片 
else echo "上 传 失败 ,错误 类 型 :".$_FIIES["upfile'] ['error']; 





到 http://localhost/php/phpbook/ chapter4/4-24. phy l=|E’ 


文件 @) 编辑) 查看 WD 收藏 和 工具 CD) 帮助 0 
地 址 加 ) | 加 http://localhost/chapter4/5-24. php 司 


客户 端 文件 名 : 马 . jpg 2 
文件 类 型 ，image/pjpeg 大 小 : 31081 宇 节 
tb C: \WINDOWS\TENMP\phpF2. tmp | 





后 的 文件 名 : D:\chapterd\inages\20144410102. jpg 
文件 上 传 成 功 【 继续 上 传 ] 


右边 是 上 传 的 图 片 文件 : 国 


图 9-19 ”9-22. php 的 运行 结果 


9.5.4 同时 上 传 多 个 文件 


多 个 文件 上 传 和 单 文件 上 传 实现 的 方法 是 相似 的 ,只 需要 在 表单 中 提供 多 个 文件 上 
传 域 ,并 指定 name 属性 值 为 同一 个 数组 即 可 。 例 如 ,在 下 面 的 程序 中 ,用 户 可 以 选择 三 
个 本 地 文件 一 起 上 传 给 服务 器 ,客户 端 页 面 代 码 (9-23. php) 如 下 ,显示 效果 如 图 9-20 
所 示 。 
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<h3 align= "center"> 多 文件 上 传 功能 演示 < /h3> 

< 了 请 选择 要 上 传 的 三 张 图 片 文件 < /p> 

< form actionr "9- 24.php" method= "post" enctype= "ltipart/form data™> 
文件 1:< input type= "file" name= "upfile[]" /><br><br> 
文件 2:< input type= "file" name= "upfile[]" /><br><br> 
文件 3:< input type= "file" name= "upfile[]" /><br><br> 

<input type= "suamit" value=" 上 传 "/> 
< /for> 


EEZTIT TT EE ox 

文件 中 编辑) 查看 收 总 WW) 工具 (” 以 

地 址 四) 财 http://locslhost/php/6/example/6. 2/6-34, -| 
多 文件 上 传 功能 演示 = 


请 选择 要 上 传 的 三 张 图 片 文件 





文件 1 区 Yizol doc | 到 | 
文件 2: :Vasavdsa.opt | we 
文件 3: :Visavisaisp | Bl| 

图 9-20 多 文件 上 传 程序 界面 





在 上 面 的 代码 中 ,将 三 个 文件 上 传 域 以 数组 的 形式 组 织 在 一 起 , 当 表 单 提交 给 脚本 文 
件 9-24. php 时 ,服务 器 端 同样 可 以 使 用 $_FILES 获取 所 有 上 传 文件 的 信息 ,但 $_FILES 
已 经 由 二 维 数 组 转变 成 了 三 维 数组 。 例 如 ,保存 第 一 个 文件 的 文件 名 的 数组 元 素 是 
$_FILESLupfile] [name] [0] 。 

接 下 来 ,根据 $_FILES 获取 的 临时 文件 文件 名 ,同样 可 以 用 move_uploaded_file() 
将 临时 文件 移动 到 指定 目录 下 ,就 实现 了 多 文件 的 上 传 。 
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一 、 练 习题 


1. 下 列 有 关 get 和 post 方法 传递 信息 的 说 法 中 ,正确 的 是 ( 
A. get 方法 是 通过 URL 参数 发 送 HTTP 请 求 , 传 递 参数 简单 , 且 没 有 长 度 限 制 
B. post 方法 是 通过 表单 传递 信息 ,可 以 提交 大 量 的 信息 
C. 使 用 post 方 法 传递 信息 会 出 现 页 面 参 数 泄露 在 地 址 栏 中 的 情况 
D. 使 用 URL 可 以 传递 多 个 参数 ,参数 之 间 需 要 用 “?” 连 接 
2. 下 列 哪个 数组 不 可 能 用 来 获取 表单 元 素 的 值 ? ( ) 
A. $_REQUESTL[] B. $_POSTL] 
Cb GETLI D. $_SERVERL[] 
3. 下 列 哪个 函数 不 是 缓冲 区 操作 函数 ? ( ) 
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A. ob_flush() B. flush() 
C. ob_flush_clean() D. ob_end_clean() 
4. 下 面 程序 段 执 行 完 毕 , 页 面 上 显示 的 内 容 是 什么 ?( ) 


< htmlspecialchars ("<a href- 'http://www.sohu.an'> 搜 狐 </a>") > 


A. 搜狐 
B. 二 a href 二 http://www. sohu. cn 这 搜狐 二 /a 二 
C. 搜狐 ( 超 链接 ) 
D. 该 句 有 错 ,无 法 正常 输出 
5. 关于 Session 和 Cookie 的 区 别 , 下 列 哪 项 是 错误 的 ? 〈 ) 
A. 服务 器 会 自动 为 用 户 建立 Cookie 对 象 
B. 用 户 关闭 浏览 器 ,网 站 为 该 用 户 创建 的 Session 对 象 将 无 法 访问 
C. 用 户 新 开 一 个 浏览 器 窗口 ,网 站 为 其 创建 一 个 新 的 Session 对 象 
D. 用 户 关闭 计算 机 ,其 Cookie 仍然 存在 
6， 如 果 要 删除 Cookie, 可 以 使 用 下 列 哪 个 函数 ? ( ) 





A. clearcookie() B. setcookie() 

C. destroy() D. ob_end_flush() 
7. 在 PHP 中 要 使 用 Session, 必 须 先 调用 下 列 哪个 函数 ? ( ) 
A. ob_start() B. session_id() 

C. session_start() D. setcookie 


8. 有 些 语 句 要 求 只 有 在 服务 器 还 没有 向 浏览 器 输出 任何 信息 前 才能 使 用 ,下 列 语句 
中 无 此 要 求 的 是 ( Dy 


A. setcookie('userName',"); B. session_start(); 
C. header("location:9-8. php "); D. session_unset(); 
9. 在 网 站 页 面 之 间 传 递 值 的 方法 有 ( ) (多 选 )。 
A. Session 变量 B.Cookie 变量 C. 表单 变量 D. URL 变量 
如 果 超 链接 的 地 址 是 http://ec. hynu. cn/instr. php? abc 二 3&bcd 二 test, 要 获取 参 
数 bcd 的 参数 值 应 使 用 的 命令 是 > 
10. Session 对 象 默认 情况 下 有 效 期 是 分 钟 。 要 提前 结束 一 个 Session ,可 以 
用 方法 。 要 返回 Session 对 象 的 id, 可 以 用 函数 。 
11. 在 A 网 页 上 创建 了 一 个 Session 变量 : $_SESSION[ "user"] 二 " 张 三 ", 在 B 网 
页 上 要 输出 这 个 Session 变量 的 值 ,应 使 用 六 
12. 假设 用 $ _POSTL'username"] 能 获取 到 信息 , 则 能 判断 提交 给 该 页 的 表单 中 含有 
属性 为 username 的 表单 元 素 。 该 表单 form 标记 的 method 属性 为 
13. 如 果 要 修改 一 个 Cookie 变量 的 有 效 期 , 需 使 用 函数 。 
14. 要 获取 上 传 文件 的 信息 ,需要 使 用 数组 ,要 将 上 传 文件 移动 到 指定 位 
置 ,需要 使 用 晴 数 。 


15. 在 PHP 中 有 哪些 常用 的 超 全 局 变量 ? 请 简 述 它们 的 主要 功能 。 





第 9 章 Weh 交 瑟 纺 种 = 
16. 在 form 标记 中 ,method 和 action 属性 的 作用 分 别 是 什么 ? 
17. 若 要 在 PHP 中 快速 获取 一 组 复 选 框 的 值 ,应 如 何 命 名 这 些 复 选 框 ? 
18. 在 PHP 中 ,设置 URL 参数 的 方法 有 哪些 ? 
19. 能 和 否 将 多 个 不 同 的 表单 页 提交 给 同一 个 表单 处 理 页 ? 


二 、 编 程 题 


1. 编写 一 个 简单 计算 器 程序 ,在 表单 中 添加 两 个 文本 框 供用 户 输入 数字 ,下 拉 框 用 
来 选择 运算 符 , 当 单 击 “ 王 ”按钮 后 在 网 页 上 输出 结果 ,如 图 9-21 所 示 。 要 求 : 单 击 “ 一 ” 
按钮 后 用 户 在 文本 框 中 输入 的 数字 仍然 存在 。 


EEEEEICCZETEECCORIEGIS 


文件 到) 编辑 EE) 查看 WW) 收藏 人 工 ” 
中 本 @) | 御 http://1ocalhost/php/2/exanp1e/2.114 加 | 
FE 











图 9-21 计算 器 程序 效果 图 


2. 下 面 的 表单 会 向 服务 器 发 送 哪 几 个 变量 信息 ? 编写 服务 器 端 程序 获取 发 送 来 的 
所 有 变量 信息 并 按 以 下 格式 输出 : XX 您 好 ,您 住 在 XX ,您 的 密码 是 XX X。 


< form name= "abc" method= "post" action= "g4.php"> 
用 户 名 : 张 三 < input type= "radio" name= "user” value=' 张 三 吃 
李 四 : < input type= "radio" name= "user” value= 叶 四 吃 
住址 : <select name= "adtr> 
<cption value= "长沙 > 长 沙 < /cption> 
<cption value= " 噜 阳 必 衡阳 < /opticn> 
< /select> 
< input type= "hidden" name= "pwd" id "hi" value= "123"> 
< input type= "submit" value= "登录 吃 
< /form 


3. 下 面 是 一 个 获取 表单 提交 信息 的 程序 ,名 称 为 rec. php, 请 写 出 一 个 能 让 它 获 取 数 
据 的 表单 代码 。 


<? $name=$ POST["name"]; // 获 取 各 个 表单 元 素 的 值 
$Sex=$_POST["Sex"]; 
$hop=$_POST["hobby"]; 
$car=$_POST["career"]; 

> 


4. 编写 PHP 程序 产生 一 个 随机 数 ,并 让 用 户 在 文本 框 输 入 数字 来 猜测 该 随机 数 ( 见 


图 9-22) ,用 户 有 5 次 机 会 ,根据 用 户 的 猜测 结果 给 予 相应 提示 (提示 : 将 程序 在 猜测 前 产 
生 的 随机 数 保存 在 表单 隐藏 域 中 ,这 样 用 户 每 次 猜测 时 该 随机 数 都 不 会 发 生变 化 ) 。 该 程 
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序 的 表单 代码 如 下 ,请 补充 PHP 代码 。 





E TOUT rT olxl 


| 2 四 人 四 四 收成 工 ” 居 


| 乱 http: /71ocalhostyphpy27exanple/2.174z 回 


猜 数 字 游 戏 ， 猜 小 了 ， 你 还 有 4 次 机 会 语 


ET ri 





输入 整数 (1-10) | 
[CD 避 


图 9-22” 猜 数字 游戏 程序 效果 图 


< form method= "post" action= ""> 输入 整数 (1- 10)<br /> 
< input type= "text" name= "SZ" size= "6"> 
< input name= "rand" type= "hidden" value= "< = $a >" /> 
< 上 -保存 猜测 前 产生 的 随机 数 --> 
< input name= "last" type= "hidden" value= "< $b >" /> 
< 上 -保存 剩余 机 会 次 数 --> 
< input type= "submit" name= "sub" value= "确定 
< /form 
5. 编写 回答 多 项 选择 题 的 PHP 程序 。 程 序 界 面 如 图 9-23 所 了 示 。 如 果 输 入 正确 答 
案 (PHP、ASP、JSP), 则 在 网 页 上 提示 “正确 ”, 如 果 少 选 了 , 则 提示 “回答 不 全 ”, 否 则 提示 
“错误 "。 


1， 以 下 属于 Web 开 发 语言 的 有 哪 几 种 ? 
AjaxF PHP 网 FLASHD ASP 网 JSP 风 国 





图 9-23 回答 多 项 选择 题 的 程序 界面 
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10.1 MySQL 数据 库 的 使 用 


MySQL 是 一 种 流行 的 关系 型 数据 库 管理 系统 软件 。 与 其 他 数据 库 管理 系统 (如 
Oracle .DB2、SQL Server) 相 比 ,MySQL 具有 体积 小 、 速 度 快 、 功 能 齐全 并 且 完 全 免费 等 
特点 ,使 得 一 般 中 小 型 PHP 网 站 的 开发 都 选择 使 用 MySQL 作为 网 站 数据 库 。 


10.1.1 数据 库 基础 


所 谓 数据 库 , 就 是 按照 一 定数 据 模型 组 织 .存储 在 一 起 的 ,能 为 多 个 用 户 共 享 的 ,与 应 
用 程序 相对 独立 、 相 互 关联 的 数据 集合 。 

日前 绝 大 多 数 数据 库 采 用 的 数据 模型 都 是 关系 数据 模型 ,所 谓 “ 关 系 ”, 简 单 地 说 就 是 
二 维 表 。 所 以 ,数据库 在 逻辑 上 可 以 看 成 是 一 些 表格 组 成 的 集合 。 一 个 数据 库 通常 包含 
n 个 表格 (n 宇 0)。 例 如 图 10-1 是 一 张 学 生 基本 信息 表 。 





图 10-1 学 生 基本 情况 表 


数据 库 中 的 一 些 基 本 术语 如 下 : 

字段 : 表 中 竖 的 一 列 叫 作 一 个 字段 ,图 中 有 7 个 字段 。 字 段 分 为 字段 名 和 字段 值 ， 
“姓名 ?就 是 一 个 字段 的 字段 名 ， 陈 诗 颖 "是 该 字段 的 一 ea 

记录 : 表 中 横 的 一 行 叫 作 一 条 记录 ,每 条 记录 可 描述 一 个 具体 的 事物 ( 称 为 实体 ) 。 
图 中 选择 了 第 2 条 记录 ,也 就 是 “ 胡 艳 ”的 相关 信息 。 

值 : 纵横 交叉 的 地 方 叫 作 值 ,比如 图 中 第 4 条 记录 的 "籍贯 ”字段 的 值 为 上海”。 

域 : 值 的 取 值 范围 称 为 域 ,例如 性 别 的 取 值 范围 是 { 男 , 女 }。 

表 : 由 横行 竖 列 垂直 相交 而 成 。 可 以 分 为 表 头 (字段 名 的 集合 ) 和 表 中 数据 两 部 分 。 
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表 也 可 看 成 是 若干 条 记录 组 成 的 集合 ,因此 在 数据 表 中 不 允许 有 两 条 完全 相同 的 记录 。 
数据 库 : 用 来 组 织 和 管理 表 的 ,一 个 数据 库 一 般 有 若干 张 表 ,这 些 表 之 间 可 以 是 相互 
关联 的 。 数 据 库 不 仅 提供 了 存储 数据 的 表 , 而 且 还 包括 视图 索引、 存储 过 程 等 高 级 功能 。 
视图 : 根据 用 户 的 需要 ,只 显示 表 中 部 分 字段 或 部 分 记录 ( 单 表 查询 ) ,或 者 显示 来 自 
多 个 表 中 的 字段 或 记录 (多 表 查 询 )。 视 图 返回 给 用 户 的 查询 结果 从 形式 上 看 也 是 一 张 
表 , 但 这 张 表 并 没有 存放 在 数据 库 中 ,而 是 在 内 存 中 通过 关系 运算 得 到 的 ,因此 是 一 张 “ 虚 
表 ”。 视图 又 称 为 查询 ,是 普通 用 户 能 看 到 的 数据 库 。 


10.1.2 使 用 phpMyAdmin 管理 数据 库 


MySQL 是 一 个 开源 软件 ,没有 提供 图 形 操作 界面 ,用 户 可 以 通过 输入 命令 行 来 执行 
各 种 数据 库 操作 ,但 这 需要 用 户 记 住 很 多 的 MySQL 命令 。 为 此 ,人 们 开发 了 
phpMyAdmin 和 Navicat for MySQL, 这 些 软 件 提供 了 MySQL 的 图 形 化 操作 界面 ,可 以 
在 图 形 界面 下 对 MySQL 数据 库 进 行 管理 。 下 面 介绍 它们 的 使 用 。 

phpMyAdmin 是 一 个 B/S 结构 的 软件 , 它 的 最 大 优势 在 于 : 用 户 将 其 上 传 到 Web 服 
务 器 的 网 站 目录 下 ,就 能 管理 远程 服务 器 上 的 MySQL 数据 库 了 。 











1. 创建 数据 库 


在 如 图 6-9 所 示 的 界面 中 单 击 phpMyAdmin 的 链接 并 输入 用 户 名 和 密码 , 即 可 进入 
phpMyAdmin 的 主 界面 ( 见 图 10-2) ,在 右 侧 窗口 的 “创建 一 个 新 的 数据 库 ” 中 可 输入 待 创 
建 的 数据 库 名 ,如 guestbook。 单 击 “ 创 建 " 按 钮 ,就 创建 了 一 个 名 为 guestbook 的 空 数 
据 库 。 








鲁 localhost:88 / localhost | phplyAdnin 2.10.2 — Microsoft Internet Exploy 
文件 编辑 时) 查看 WD 收 着 人 工具 CD) 帮助 0D 


二 
吨 奸 加 | 入 http://1ocalhost:88/wew/phpllyAdnin/ 人 
- 


已 创建 的 数据 库 ， 数 字 ] localhost 
表示 数据 库 中 的 表 数 






















胃 服 务 器 版 本 : 5 0.45-community-nt-log { 
， Protocol version: 10 
加 服务 器 : localhost via 
上 用户: root@localho 










创建 数据 库 : 
输入 数据 库 名 













辆 MySQL 连接 校对 


Utf8_unicode_ci 可 | 








图 10-2 phpMyAdmin 的 主 界面 


提示 : 创建 guestbook 数据 库 后 ,MySQL 会 自动 在 D:\AppServ\MySQL\data 目录 
下 创建 guestbook 子 目 录 及 相关 文件 (如 db. opt)。 因 此 ,一 个 MySQL 数据 库 对 应 一 个 
目录 ,如 果 要 移动 一 个 MySQL 数据 库 到 另 一 台 机 器 ,只 需 把 该 数据 库 对 应 的 目录 复制 到 
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一 台 机 器 的 \MySQL\data 目录 下 即 可 。 
2. 新 建 表 


创建 数据 库 后 ,网 页 会 转 到 如 图 10-3 所 示 的 创建 表 的 窗口 。 在 该 窗口 中 输入 待 创建 
表 的 名 称 , 如 lyb, 然 后 在 Number of fields 后 输入 表 中 的 字段 数 , 单 击 “ 执 行 ” 按 钮 , 即 创 
建 了 一 个 名 为 lyb 的 表 。 此 时 网 页 会 转 到 如 图 10-4 所 示 的 表 的 设计 视图 ,在 这 里 需要 输 
入 每 个 字段 的 名 称 、 类 型 长 度 等 信息 ,并 定义 主键 和 和 额外 (如 自动 编号 ) 等 。 





人 localhost:88 / localhost / guestbook | phpykdnin 2 10.2 — Microsoft Taterset e010 
文件 中 ”编辑 人 查看 WW) 收 总 和 ) 工具 中 帮助 0 
下 十 加 中 http://aoealhosty/phpWyAanin/ 





胃 服务 器 : localhost 号 数据 库 : guestbook 

OL | 万 拓 过 | 局 查 放 前 导出 毅 Inpofl 葡 业 作 | 的 权限 
PhpidsAdmin _ 因 弄 除 
加 数据 库 guestbook 已 经 建立 。 


数据 库 数据 库 中 没有 表 。 
guestbook (0) 避 





在 数据 库 guestbook 中 创建 一 个 新 表 
guestbook (1) 名 字 : |yb 


国 yb2 








图 10-3” ”phpMyAdmin 创建 表 的 窗口 














图 服务 器 : localhost 》 加 数据 库 : guestbook ， 回 表 : yb 

字 有 & 类 型 加 长 度 慎 1 图 三 
证 广 | | 
pl J | 6 
Bunor acmar lo chinese wils|o 
[ra [wschR 辐 Po Ed pr rE pe 
le Maca ll s|s|s|o 
Ee [ee 六 一 | PE pe 
sex CHAR ll 232 nneses TT 
= C7 TL 


图 10-4 输入 表 中 的 字段 


由 于 本 节 创 建 的 表 lyb 是 一 个 给 留言 板 保存 用 户 留 言 的 表 。 因 此 该 表 中 的 字段 
(title content vauthor、email ip .addtime、sex) 分 别 用 来 保存 留言 的 标题 内容、 留言 者 、 
留言 者 的 email、 留 言 者 的 IP、 留 言 时 间 、 留 言 者 性 别 。 

图 10-4 中 的 一 行 对 应 一 个 字段 ,也 就 是 表 中 的 一 列 , 其 中 字段 名 称 建议 用 英文 命名 ， 
这 样 方便 以 后 使 用 PHP 程序 访问 表 中 字段 。 对 每 个 字段 还 可 以 添加 注释 。MySQL 中 ， 
字段 的 数据 类 型 主要 有 以 下 几 种 。 

。 INT: 用 于 存储 标准 的 整数 ,该 类 型 数据 占 4 个 字 节 (不 能 设 定 长 度 ) , 取 值 范围 从 

一 214 783 648 一 214 783 647。 如 果 要 存储 的 整数 比较 小 ,还 可 考虑 使 用 tinyint 
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( 取 值 范围 一 127 一 127) 和 smallint 数据 类 型 (一 32 768 一 32 767) 。 
。 VARCHAR: 是 一 种 可 变 长 度 的 字符 串 类 型 , 它 可 设 定 长 度 , 其 长 度 范 围 在 0 一 
255 个 字符 之 间 , 用 于 存储 比较 短 的 字符 串 。 
。 CHAR: 是 一 种 固定 长 度 的 字符 串 类 型 ,这 种 字段 占用 的 空间 被 固定 为 创建 时 所 
声明 的 长 度 。 
。 TEXT: 用 于 存储 比较 长 的 字符 串 ,或 图 像 .声音 等 二 进 制 数 据 。 该 类 型 不 能 指定 
长 度 。TEXT 和 BLOB 类 型 在 分 类 和 比较 上 存在 区 别 。BLOB 类 型 区 分 字母 大 
小 写 , 而 TEXT 不 区 分 大 小 写 。 比 指定 类 型 支持 的 最 大 范围 大 的 值 将 被 自动 
截 短 。 
BOOL: 即 布尔 型 数据 , 它 只 能 取 True 和 False 两 个 值 。 
。 DATETIME: 用 于 保存 日 期 /时 间 的 数据 类 型 ,该 类 型 不 能 指定 长 度 。 此 外 ,如 
果 只 希望 保存 日 期 ,可 使 用 DATE 类 型 ;如 果 只 要 保存 时 间 , 可 使 用 TIME 
类 型 。 
提示 : CHAR 和 VARCHAR 的 区 别 在 于 : 假设 将 一 个 长 为 10 字 节 的 字符 串 保 存在 
一 个 类 型 为 CHAR(40) 的 字段 中 , 则 该 字符 串 将 占用 40 字 节 ,MySQL 会 自动 在 它 的 右 
边 用 空格 字符 补足 。 而 如 果 将 其 保存 在 类 型 为 VARCHAR(40) 的 字段 中 , 则 该 字符 串 只 
占用 11 字 节 (每 个 值 只 占用 刚好 够 用 的 字 节 ,再 加 上 一 个 用 来 记录 其 长 度 的 字 节 )。 可 
见 , 要 节省 存储 空间 ,可 以 使 用 varchar 类 型 ,而 从 速度 方面 考虑 ,最 好 使 用 char 类 型 。 
在 图 10-4 中 ,将 留言 的 ID 字段 设置 为 auto_increment( 自 动 递增 ) ,这样 每 插入 一 条 
记录 ,系统 都 会 自动 为 该 记录 的 ID 字段 添加 一 个 递增 的 数值 ,以 保证 每 条 记录 都 会 有 一 
个 唯一 的 编号 ,在 查找 或 显示 留言 时 可 以 依据 这 个 编号 找到 对 应 的 留言 。 留 言 的 内 容 
(content 字段 ) 必 须 采 用 TEXT 数据 类 型 ,以 保证 它 可 以 容纳 很 长 的 文本 内 容 。 
最 后 可 以 对 表 设 置 主键 ,所 谓 主键 ,是 指 能 唯一 标识 某 条 记录 的 字段 。 作 为 主键 的 字 
段 必须 能 满足 两 个 条 件 : 
(1) 该 字段 中 的 值 不 能 为 空 ; 
(2) 字段 中 的 值 不 能 有 重复 的 ,这 样 该 字段 才能 唯一 标识 某 条 记录 。 
本 例 中 ID 是 自动 递增 字段 ,自然 不 会 有 重复 ,也 不 会 有 空 值 ,因此 可 将 其 作为 主键 。 
设置 主键 的 方法 是 将 该 字段 右 侧 表示 “主键 "的 单 选 按 钮 选中 即 可 。 


3， 修改 表 的 结构 


创建 了 表 以 后 ,在 图 10-3 的 左 侧 窗口 ,数据库 guestbook 下 面 就 会 显示 该 数据 库 中 
已 存在 的 表 , 如 果 要 修改 表 的 结构 ,可 以 在 图 10-3 的 左 侧 窗口 中 单 击 该 表 名 , 右 侧 窗 口 就 
会 出 现 如 图 10-5 所 示 的 数据 表 管 理 界 面 ,在 这 里 可 对 数据 表 的 结构 进行 修改 ,例如 在 表 
中 添加 字段 .删除 字段 或 修改 字段 。 


4， 向 表 中 添加 记录 


在 图 10-5 的 数据 表 管 理 界面 中 , 单 击 上 方 的 “插入 ”选项 卡 ,就 会 出 现 如 图 10-6 所 示 
的 窗口 ,在 这 里 可 以 向 表 中 添加 记录 ( 即 向 表 中 插入 一 行 ) ,一 次 最 多 只 能 添加 两 条 记录 。 
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困 服务 器 : localhost ， 昂 数据 库 : guestbook， 国 表 :yb 
_ 国 W 本 区 机 RsoL 户 扫 来 | 3 入 | 


导出 “并 Import | 多 操作 ”出 诸 空 网 权 除 
编辑 字 EID 除 字 段 
字段 类 型 整理 尾 性 Nul 扶 认 额外 (SE 
[| smallint(6) auto_increment SA 














否 转 图 加 
户 varchar(60) 9b2312_9 ; 否 图 回 
厂 content text gb2312_chinese_ci 否 围 图 加 园 
下 | varchar(40) gb2312_chinese_ci 否 回回 
5 varchar(30) gb2312_chinese_ci 否 图 回国 
Pi varchar(20) gb2312_chinese_ci 否 国 加 | 加 同 
FF addtime datetime 要 围 图 有 辐 
厂 sex chal2) gb2312_chinese_ci 否 转 回 









企 _ 全 选 /全 部 不 选 凑 因 项 国 户 X 图 加 回国 











自动 编号 字段 不 要 答 入 值 






字 良 类 型 函数 Null 
D smamt 六 本 
te varchale0) 六 本 RRRG | 
司 


content text isi 以 来 的 项 助 
author varcnardol 站 本 [EE 
email varchar(30) “| FEama@qq com 
ip varchar(20) 司 [59.512437 
addtime ”datetime S| 2012-3-317:34:21 ”图 
2 car2) 可 加 
以 新 行 插 入 可 andthen | 后 退 到 上 一 页 国 


自 单 击 "执行 "将 添加 记录 |[ 欧 硬 | 划 到 | 


图 10-6 向 表 中 添加 记录 (插入 一 行 ) 













说 明 : 

(1) 在 各 字段 输入 值 时 必须 符合 字段 数据 类 型 及 该 字段 格式 的 要 求 ,否则 无 法 输入 ; 

(2) 不 要 输入 自动 编号 字段 的 值 , 因 为 系统 会 自动 添加 ,删除 某 一 记录 后 自动 编号 字 
段 (ID) 的 值 也 不 会 被 新 记录 占用 。 


5. 修改 或 删除 记录 


如 果 要 修改 或 删除 一 条 记录 ,可 以 单 击 图 10-5 中 的 “浏览 ”选项 卡 , 则 页 面 下 方 将 显 
示 表 中 所 有 记录 ,如 图 10-7 所 示 。 在 每 条 记录 的 左 侧 均 有 “编辑 ”和 “删除 ”按钮 , 单 击 对 
应 按钮 即 可 对 该 条 记录 进行 编辑 或 删除 。 
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[50 行 , 了 is 和 数 : [ | 

以 [水 和 ” ”” 辐 模式 显示 , 并 且 在 [100 “个 单元 格 后 重复 标题 1 
主键 排序 :| 元 习 执行 | { 
-TT— IDssss ttessse Content =sas= author ss 人 emailssise { 
5 [slx 1 视 大 家 天 天 开心 非常 感谢 大 家 长 期 以 来 的 帮助 唐 = 彩 sanyo@tom com 1 
FizIlx 131 到 此 一 游 本 人 今天 到 此 一 游 小 神 马 | 
5 12x | 132 主教 个 题 。 ”虚拟 目录 中 的 文件 如 何 浏览 ” 李 二 十 tdkd@163 com t 


个 全 选 /全 部 不 选 次 四 硕 户 X 加 时 
图 10-7 修改 或 删除 表 中 的 记录 


6. 修改 表 名 或 复制 表 


在 图 10-5 上 方 的 “操作 ”选项 卡 中 ,可 以 对 表 名 进行 修改 ,只 要 在 “ 表 选 项 "中 ,在 “将 
表 改 名 为 ”后面 输 入 新 表 名 即 可 。 在 右 侧 的 “将 表 复 制 到 ”选项 中 ,还 可 将 表 复制 到 其 他 数 
据 库 中 ,或 复制 为 本 数据 库 中 其 他 的 表 。 


10.1.3 使 用 phpMyAdmin 导出 导入 数据 
1. MySQL 数据 库 的 迁移 


有 时 为 了 把 PHP 程序 迁移 到 另 一 台 计 算 机 上 运行 ,或 上 传 到 服务 器 上 。 就 需要 将 
PHP 程序 访问 的 MySQL 数据 库 也 一 起 迁移 。 迁 移 MySQL 数据 库 有 两 种 方案 : 

(1) 复制 目录 的 方式 。 每 个 MySQL 数据 库 对 应 一 个 目录 ,例如 数据 库 lyb 对 应 D:\ 
AppServ\MySQLN\data\lyb 目录 ,该 目录 下 保存 了 数据 库 中 的 相关 数据 。 如 果 要 移动 数 
据 库 lyb 到 另 一 台 机 器 ,只 需 把 该 数据 库 对 应 的 目录 复制 到 另 一 台 机 器 的 \MySQLAdata 
目录 下 即 可 (复制 之 前 最 好 先 停止 MySQL 服务 器 ) 。 

(2) 导出 和 导入 . sql 文件 的 方式 : 可 以 将 一 个 数据 库 ( 或 表 ) 导 出 成 一 个 . sql 文件 ， 
该 . sql 文件 中 包含 了 很 多 条 SQL 命令 ,用 来 创建 所 有 表 的 结构 和 插 和 人 数据。 在 另 一 台 机 
器 上 先 创建 一 个 空 数据 库 ,再 将 这 个 . sql 文件 导入 到 空 数据 库 中 即 可 。 


2. 使 用 phpMyAdmin 导出 和 导入 数据 


(1) 在 phpMyAdmin 中 导出 数据 库 的 步骤 是 : 在 图 10-3 的 左 侧 单 击 选择 要 导出 的 
数据 库 ( 或 表 ) ,然后 单 击 图 10-3 上 方 的 “导出 ”选项 卡 , 就 会 出 现 “数据 库 的 转 存 ”界面 ( 见 
图 10-8) ,选中 “另存 为 文件 ” 复 选 框 , 单 击 “ 执 行 ”按钮 ,就 会 生成 并 提示 下 载 “*. sql” 的 
误 件 。 

(2) 导入 数据 库 的 步骤 是 : 首先 创建 一 个 空 数 据 库 ( 见 图 10-2) ,然后 单 击 图 10-3 上 
方 的 Import 选项 卡 ,就 会 出 现 导 入 sql 文件 界面 ( 见 图 10-9) ,选择 一 个 . sql 的 文件 ,然后 
指定 该 文件 的 字符 集 ( 若 不 知道 文件 的 字符 集 ,可 以 用 记事 本 打开 该 文件 ,然后 选择 “ 文 
件 ” 一 另存 为 ”命令 ,在 "另存 为 ?对 话 框 下 方 的 “编码 ”中 ,就 可 以 看 到 它 的 字符 集 ) , 单 击 
“执行 ”按钮 ,如 果 提 示 导 入 成 功 ,就 将 数据 导入 进 了 空 数据 库 中 。 


第 10 章 PHP 访 问 训 据 亩 =-(60 人 








三 查看 数据 库 的 转 存 (大 岗 )。 








厂 AddDROP TABLE1DROP VIEW 
厂 AddIF NOT EXISTS 

厅 添 加 AUTO_INCREMENT 值 

克 请 在 表 名 及 字段 名 使 用 引号 

[ Add CREATE PROCEDURE /FUI 














区 ‘gyi zip 压缩 个 gzip 压缩 
图 10-8 数据 库 的 转 存 














图 10-9 导入 .sql 文件 


10.1.4 使 用 Navicat 管理 数据 库 


Navicat for MySQL 是 一 个 C/S 结构 的 MySQL 数据 库 管 理 系统 ,其 功能 比 
phpMyAdmin 更 加 强大 。Navicat 10. 1 的 界面 如 图 10-10 所 示 , 下 面 来 讲解 它 的 使 用 
方法 。 


Havicat for myS9L 


文件 到 ) 查看 YY) 收藏 夹 人 ) 工具 CY) 窗口 和 帮助 00 
了 EEE 


“打开 表 “设计 表 Be i 本 导入 向 导 加 导出 

















图 10-10 ”Navicat for MySQL 的 界面 


1. 连接 MySQL 服务 器 
Navicat 在 使 用 前 ,必须 先 连接 数据 库 服务 器 , 单 击 图 10-10 工具 栏 中 的 “连接 ”按钮 ， 
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将 弹出 “新 建 连接 "对话 框 ( 见 图 10-11) ,连接 名 可 任 取 一 个 名 字 , 输 入 正确 的 用 户 名 和 密 
码 即 可 。 连 接 成 功 后 ,在 图 10-10 左 侧 的 导航 窗口 
中 双击 连接 图 标 conn, 就 可 看 到 本 机 上 所 有 的 
MySQL 数据 库 。 


2. 新 建 数据 库 





二 新 建 连接 


在 图 10-10 的 conn 或 数据 库 图 标 上 右 击 , 选 
择 右键 菜单 中 的 “新 建 数 据 库 ”, 然 后 输入 数据 库 
名 即 新 建 了 一 个 数据 库 。 


3. 新 建 表 10-11 “新 建 连接 ”对 话 框 








新 建 完 数据 库 后 , 接 下 来 当然 是 新 建 表 了 。 在 图 10-10 左 侧 导航 栏 中 的 “ 表 ” 上 右 击 ， 
选择 “新 建 表 ” 命 令 , 将 弹出 新 建 表 窗 口 ( 见 图 10-12) ,在 这 里 可 定义 表 中 的 每 个 字段 ,并 
设置 主键 等 。 其 中 “ 栏 位 ”表示 “字段 ”, 单 击 “ 添 加 栏 位 "就 可 添加 一 个 字段 。 定 义 完 字段 
后 , 单 击 “ 保 存 ” 按 钮 ,输入 表 名 即 新 建 了 一 个 表 。 如 果 以 后 要 修改 表 的 结构 ,在 图 10-10 
中 单 击 该 表单 击 工具 栏 下 方 的 “设计 表 ” 按 钮 就 可 以 了 。 


























图 10-12 新 建 表 窗 口 


4. 在 表 中 添加 记录 


在 图 10-10 的 右 侧 窗 口 双击 某 个 表 ( 如 news) ,将 弹出 表 的 数据 视图 ( 见 图 10-13), 单 
击 “ 十 ”按钮 ,就 可 以 插入 一 条 记录 。 单 击 “ 一 ”按钮 ， 
可 删除 一 条 记录 。 


5. 导出 数据 库 


在 图 10-10 中 ,在 某 个 数据 库 ( 如 abced) 上 右 击 ， 
选择 “ 转 储 SQL 文件 ”命令 , 单 击 “保存 ”按钮 , 即 可 将 
数据 库 导出 成 . sql 文件 。 


6. 导入 数据 库 图 10-13 表 的 数据 视图 








首先 新 建 一 个 空 数据 库 , 然 后 在 图 10-10 左 侧 的 数据 库 图 标 上 右 击 , 选 择 “ 运 行 SQL 
文件 ?命令 , 单 击 “…? 按 钮 ,选择 一 个 要 导入 的 . sql 文件 , 单 击 “ 开 始 ? 按 钮 , 则 开始 执行 该 
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. sql 文件 中 的 代码 ,如 果 执 行 成 功 ,就 会 将 所 有 表 及 数据 导入 到 该 数据 库 中 来 。 
7. 将 Access 数据 库 转换 成 MySQL 数据 库 


首先 新 建 一 个 数据 库 ( 如 lyb) ,然后 在 图 10-10 中 双击 展开 数据 库 , 在 “ 表 ” 上 右 击 , 选 
择 “ 导 和 向导” 命令, 就 会 弹出 如 图 10-14 所 示 的 
“性 人 向导 ”对 话 框 ,选择 “MS Access 数据 库 ” , 
单 选 按 钮 。 单 击 “ 下 一 步 ” 按 钮 ,选择 一 个 . mdb et 
Access 数据 库 文件 ,在 下 方 将 出 现 该 数据 库 中 
所 有 的 表 , 选 中 要 转换 的 表 , 单 击 “ 下 一 步 ” 按 
钮 ,可 设置 是 否 新 建 目标 表 及 目标 表 的 名 称 , 均 
保持 默认 即 可 ,继续 单 击 “ 下 一 步 ”按钮 , 即 可 将 
Access 数据 库 转 换 成 MySQL 数据 库 。 

提示 : 使 用 Access2MySQL Pro 5 软件 也 
可 将 Access 数据 库 转 换 成 MySQL 数据 库 。 








图 10-14 “导入 向 导 ” 对 话 框 


10.2 SQL 语言 


SQL(Structured Query Language) 即 结构 化 查询 语言 ,是 操作 各 种 数据 库 的 通用 语 
言 。 在 PHP 中 ,无 论 访问 哪 种 数据 库 ,都 需要 使 用 SQL。SQL 语言 本 身 是 比较 庞大 复杂 
的 ,但 制作 普通 动态 网 站 只 需 掌握 以 下 最 常用 的 SQL 语句 就 够 了 。 

(1) Select 语句 一 一 查询 记录 ,基本 形式 为 Select…from…。 

(2) Insert 语句 一 一 添加 记录 ,基本 形式 为 Insert into…values… 。 

(3) Delete 语句 删除 记录 ,基本 形式 为 Delete from…[where]…。 

(4) Update 语句 更 新 记录 ,基本 形式 为 Update…Set…。 

(5) Create 语句 一 一 创建 表 或 数据 库 ,基本 形式 为 Create table( 或 Database)…。 


10.2.1 Select 语句 


Select 语句 用 来 实现 对 数据 库 的 查询 。 简 单 地 说 ,就 是 可 以 从 数据 库 的 相关 表 中 查 
询 符 合 特定 条 件 的 记录 ( 行 ) 或 字段 ( 列 ) 。 语 法 如 下 : 








Select 字段 列表 Pram 表 [Where 条件] [order BY 字段 ] [Group By 字段 ] [limit s, n] 

说 明 : 

(1) 字段 列表 : 即 要 显示 的 字段 ,可 以 是 一 个 或 多 个 字段 名 ,多 个 字段 之 间 用 逗号 隔 
开 。 用 “x* ”表示 全 部 字段 。 

(2) 表 : 指 要 查询 的 数据 表 的 名 称 , 如 果 有 多 个 表 , 则 中 间 用 逗号 隔 开 。 

(3) Where 条 件 : 就 是 查询 只 返回 满足 这 些 条 件 的 记录 。 

(4) Order By 字段 : 表示 将 查询 得 到 的 所 有 记录 按 某 个 字段 进行 排序 。 

(5) Group By 字段 : 表示 按 字段 对 记录 进行 分 组 统计 。 
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(6) limit s, n: 表示 选取 从 第 s 条 记录 开始 的 n 条 记录 ,如 果 省 略 s, 则 表示 选取 前 n 
条 记录 。 如 选取 前 6 条 记录 ,就 是 limit 6。 





1. 常用 的 Select 语句 示例 

(1) 选取 数据 表 中 的 全 部 数据 (所 有 行 所 有 列 ): 
Select * from1yb 

(2) 选取 指定 字段 的 数据 ( 即 选 取 表 中 的 某 几 列 ) : 
Select author, title fran 1yb 


(3) 选取 数据 表 中 最 前 面 几 行 或 中 间 几 行 记录 


Select * from lyb limit 5 // 选 取 前 5 条 记录 (limit n 等 价 于 limit 0, n) 
Select * fram lyb limit 0, 5 // 选 取 前 5 条 记录 (记录 行 号 从 0 开始 ) 
Select * from 1yb limit 5, 10 // 选 取 第 6 到 15 条 记录 


说 明 : MySQL 或 Oracle 等 数据 库 使 用 limit 关键 字 来 限制 返回 的 结果 集 。limit 只 
能 放置 在 Select 语句 的 最 后 位 置 。 语 法 为 : 

limit [ 首 行 行 号 ,] 记录 条 数 

对 于 微软 的 数据 库 产品 ,要 选取 表 中 前 n 条 记录 ,必须 使 用 Select top n 的 语法 。 
例如 : 

Select top 5 * fram lyb // 选 取 前 5 条 记录 , 非 wsQL 数 据 库 的 写法 

(4) 选取 满足 条 件 的 记录 


Select * from 1yb where ID>5 
Select * frcm 1yb where author= ' 张 三 ' 
Select author, title from 1yb where ID Between 2 And 5 // 如 果 条 件 是 连续 值 


Select * from 1yb where ID in(l, 3, 5) // 如 果 条 件 是 枚 举 值 
由 此 可 见 ,Select 子 句 用 于 从 表 中 选择 列 (字段 ), Where 子 句 用 来 选择 行 (记录 ) 。 
说 明 : 


(1) 在 SQL 语句 中 用 到 常量 时 ,字符 串 常量 两 边 要 加 单 引 号 (如 张 三 ) ,日 期 和 时 间 
两 边 要 加 # 号 ,而 数值 常量 可 加 单 引 号 ,也 可 不 加 (如 5)。 

(2) SQL 语言 不 区 分 大 小 写 , 但 在 PHP 中 书写 SQL 语句 ,字段 名 是 区 分 字母 大 小 
写 的 。 

2. 选取 满足 模糊 条 件 的 记录 

有 时 经 常 需要 按 关键 字 进 行 模糊 查询 ,例如 ， 


Select * Eroam 1yb Where author like " 芬 9 /author 字 段 中 有 "只 嘻 的 记录 
Select * From 1yb Where author like " 张 %" // 姓 名 以 张 开 头 的 人 
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Select * Erom 1yb Where author like ' 唐 // 姓 名 以 唐 开 头 且 为 单 名 的 人 


其 中 ,“%” 表 示 与 任何 0 个 或 多 个 字符 匹配 .“_” 表 示 与 任何 单个 字符 匹配 。 需 要 注 
意 的 是 ,如 果 在 Access 中 直接 写 查 询 语句 ,“%" 需 换 成 *“* ”,“_” 需 换 成 “?”。 


3. 对 查询 结果 进行 排序 
利用 Order By 子 句 可 以 将 查询 结果 按照 某 种 顺序 排序 出 来 。 例 如 ， 





Select * Erom 1yb order by author ASC 
Select * From 1yb order by id desc // 根 据 ia 字 有 段 降序 排列 
如 果 要 按 多 个 字段 排序 , 则 字段 间 用 逗号 隔 开 。 排 序 时 ,首先 参考 第 一 字段 的 值 , 当 
第 一 字段 值 相同 时 ,再 参考 第 二 字段 的 值 ,以 此 类 推 。 例 如 : 


Select * From 1yb order by date DESC, author 
说 明 : ASC 表示 按 升序 排列 ,DESC 表示 按 降序 排列 。 如 果 省 略 ,默认 值 为 ASC。 
4. 汇总 查询 


有 时 需要 对 全 部 或 多 条 记录 进行 统计 。 比 如 对 一 个 学 生成 绩 表 来 说 ,可 能 希望 求 某 
门 课 程 所 有 学 生 的 平均 分 。 又 如 对 学 生 信 息 表 来 说 ,可 能 需要 求 每 个 专业 的 学 生 人 数 。 
Select 语句 中 提供 了 Count、Avg、Sum、Max 和 Min 共 5 个 聚合 函数 ,分 别 用 来 求 记录 总 
数 . 平 均值 .和 、 最 大 值 和 最 小 值 。 下 面 是 两 个 汇总 查询 的 示例 。 

Select count (* ) From 1yb // 查 询 1 如 表 中 的 记录 总 数 

Select avg(id) ,sum(id) ,max (id) From 1yb 

说 明 : 

(1) 以 上 例子 返回 的 查询 结果 都 只 有 一 条 记录 , 即 汇总 值 。 

(2) Count( * ) 表 示 对 所 有 记录 计数 。 如 果 将 * 换 成 某 个 字段 名 , 则 只 对 该 字段 中 非 
空 值 的 记录 计数 。 

(3) 如 果 在 以 上 例子 中 加 上 Where 子 句 , 将 只 返回 符合 条 件 的 记录 的 汇总 值 。 

聚合 函数 还 可 以 与 group by 子 句 结合 使 用 ,以 便 实现 分 类 统计 。 比 如 要 统计 每 个 系 
的 男生 人 数 和 女生 人 数 的 Select 语句 如 下 : 


Select 系 名 ,sex, count (* ) Fram students Group By 系 名 ，sex 


注意 : 使 用 group by 子 句 时 ,Select 子 名 中 只 能 含有 group by 中 出 现 过 的 字段 名 。 
5. 多 表 查 询 


如 果 要 查询 的 内 容 来 自 多 个 表 , 就 需要 对 多 个 表 进 行 连接 后 再 进行 查询 。 

例如 , 某 购物 网 站 的 数据 库 中 含有 两 个 表 : 商品 表 (goods) 和 购物 车 表 (cart)。 商 品 
表 中 包含 了 商品 id、 商 品名 、 商 品 图 片 、 型 号 单价 商品 描 述 等 字段 。 购 物 车 表 中 包含 了 
用 户 id、 商 品 id、 商 品 数 量 等 字段 。 两 个 表 的 结构 如 下 : 


@_W.. 准 网 页 设计 与 PHP 


商品 表 : goods (spID, Name, Picture, Type, Price, descrpt) 
购物 车 表 : cart (UserID, spID, Ninber) 
但 一 般 的 购物 车 网 页 中 ,往往 还 需要 将 商品 的 图 片 、 名 称 、 单 价 等 信息 显示 出 来 ,如 
图 10-15 所 示 ,以便 顾客 能 清楚 地 看 到 购物 车 中 的 各 种 商品 。 但 购物 车 表 中 却 只 保存 了 
商品 id(spID) ,并 没有 保存 商品 的 其 他 属性 。 为 此 ,可 以 通过 商品 id 字段 (两 个 表 中 共有 
的 字段) ,将 购物 车 表 和 商品 表 连 接 起 来 ,就 能 查询 到 商品 名 称 、 图 片 . 单 价 . 用 户 id 和 数 
量 等 存储 在 两 个 表 中 的 信息 了 。Select 语句 如 下 : 





Select Name，Ricture，Price，Nuniber，Nunmiber * Prioe from goods，cart where goods.spID= cart.spID and 
Cart .userID= "tangsix"' 











tangsix 的 购物 车 (9 去 单 ) 

数量 总 价 ( 元 ) 拱 作 
收藏 
2 ¥168.00 i 

创 佳 /Canca 32HME8000 R35 液晶 
E 收藏 
电视 ¥ 1498.00 2 | 国 ¥2996.00 yp 
版 本 : 送 台 持 国 
三 星 ( SAMSUNG ) 液晶 显示 器 收藏 
医 到 ] S22C150N ¥788.00 1 | 因 ¥788.00 py 
Lenovo 联 想 G480A-ITH i3-23 收藏 
压 48/2G/500G/1G 独 显 ¥2999.00 1 | 国 ¥2999.00 pe 

《人 纵 续 购物 清空 购物 车 商品 总 价 ( 不 仿 运 费 ): 半 9,549.00 











图 10-15 一 个 顾客 购物 车 网 页 


说 明 : 

(1) 在 多 表 查 询 中 ,如 果 若 干 个 表 中 都 有 同一 个 字段 名 , 则 字段 名 必须 写成 “ 表 名 . 字 
段 名 ”, 以 指定 该 字段 是 某 个 表 的 ,如 cart. spID 表示 cart 表 的 spID 字段 。 

(2) 上 述 查 询 的 where 子 句 中 的 goods. spID 二 cart. spID 表示 将 两 个 表 通 过 spID 进 
行 连接 ,如 果 是 多 表 查 询 , 那 么 这 样 的 连接 条 件 一 定 不 能 省 略 。 


6. 其 他 辅助 查询 功能 


使 用 distinct 关键 字 可 以 去 掉 查 询 结 果 中 重复 的 记录 ,使 用 as 关键 字 可 以 为 字段 名 
指定 别名 。 例 如 : 


Select distinct author Fram 1yb // 多 条 记录 中 有 相同 的 作者 名 则 只 显示 一 条 
Select author as 作者 ，title as 标题 From 1yb // 将 字段 名 author 显 示 为 作者 


10.2.2 添加 删除. 更 新 记录 的 语句 
在 SQL 中 ,添加 、 删 除 、 更 新 记录 可 分 别 使 用 insert delete 和 update 语句 实现 。 
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1. insert 语句 


在 动态 网 站 程序 中 ,经 常 需要 向 数据 库 中 插入 记录 。 例 如 用 户 发 表 一 条 留言 ,就 需要 
将 这 条 留言 作为 一 条 新 的 记录 插入 到 表 lyb 中 。 使 用 insert 语句 可 以 实现 该 功能 ,语法 
如 下 : 

Insert Into 表 他 段 1 字段 2 …) Values 他 有 段 1 的 值 , 字段 2 的 值 , …) 

说 明 : 

(1) 利用 Insert 语句 可 以 给 表 中 部 分 或 全 部 字段 赋值 。Value 括号 中 的 字段 值 的 顺 
序 必 须 和 前 面 括号 中 的 字段 一 一 对 应 。 各 字段 之 间 .字段 值 之 间 用 逗号 隔 开 。 

(2) 在 插入 记录 时 要 注意 字段 的 数据 类 型 , 若 为 字符 串 类 型 , 则 该 字段 值 的 两 边 要 加 
单 引号 ; 若 为 日 期 /时 间 型 也 应 在 值 两 边 加 单 引 号 , 若 为 布尔 型 , 则 值 应 为 True 或 False; 
自动 递增 字段 不 需要 插入 值 。 

(3) 可 以 只 给 部 分 字段 赋值 ,但 主键 字段 必须 赋值 ,不 能 为 空 且 不 能 重复 。 

下 面 是 一 些 插 入 记录 的 例子 : 

Insert Into 1yb(author) values(' 芬 芬 ') 

Insert Into 1yb(author, title, ‘date`) values(' 苏 芬 ',' 大 家 好 !',，'205- 12- 12') 

说 明 : 由 于 date 是 SQL 语言 中 的 一 个 关键 字 , 如 果 表 中 的 字段 名 与 SQL 中 的 关键 
字 相 同 ,就 必须 把 该 字段 名 写 在 反 引 号 内 ,如 date, 和 否则 SQL 语句 会 出 错 。 因 此 有 时 在 执 
行 Insert 语句 出 现 不 明 原因 的 错误 时 ,不 妨 把 所 有 字段 名 都 写 在 反 引号 内 。 


2.Delete 语句 


使 用 Delete 语句 可 以 一 次 性 删除 表 中 的 一 条 或 多 条 记录 。 语 法 如 下 : 

Delete From 表 [where 条 件 ] 

说 明 :“Where 条 件 ” 与 Select 语句 中 的 Where 子 句 作 用 是 一 样 的 ,都 用 来 筛选 记 
录 。 在 Delete 语句 中 ,凡是 符合 条 件 的 记录 都 会 被 删除 :如果 没有 符合 条 件 的 记录 则 不 


删除 ;如 果 省 略 Where 子 句 , 则 会 将 表 中 所 有 的 记录 全 部 删除 。 
下 面 是 一 些 删 除 记录 的 例子 : 


Delete fram 1yb where id=17 
Delete fram 1yb where author= ' 芬 芬 " 
Delete from 1yb where date< '2010- 9- 1 


提示 : Delete 语句 以 删除 一 整 条 记录 为 单位 , 它 不 能 删除 记录 中 某 个 或 多 个 字段 的 
值 , 因 此 Delete 与 from 之 间 没 有 * 或 字段 名 。 如 果 要 删除 菜 些 字段 的 值 ,可 以 用 下 面 的 
Update 语句 将 这 些 字段 的 值 设置 为 空 。 





3. Update 语句 


Update 语句 用 来 修改 表 中 符合 条 件 的 记录 。 语 法 如 下 : 
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Update 表 set 字段 二 字段 值 1 字段 二 字段 值 2… [Where 条 件 ] 


说 明 : Update 语句 可 以 更 新 全 部 或 部 分 记录 。 其 中 “Where 条 件 ” 是 用 来 指定 更 新 
数据 的 范围 ,其 用 法 同 Delete 语句 。 凡 是 符合 条 件 的 记录 都 会 被 更 新 ,如 果 省 略 条 件 , 则 
将 更 新 表 中 所 有 的 记录 。 

下 面 是 一 些 常 见 的 例子 : 





Update 1yb set email= 'fengf@ 163.com' where author= " 芬 芬 ， 

Update 1yb set title= ' 此 留言 已 被 删除 ', oontent=Null where id=16 

修改 记录 时 ,也 可 以 采取 先 删除 再 添加 记录 。 不 过 ,这 样 实际 上 是 添加 了 一 条 记录 ， 
记录 的 自动 递增 值 会 改变 ,而 有 时 是 需要 通过 自动 递增 值 来 查找 记录 的 ,而 且 采 取 先 删除 
再 添加 需要 执行 两 条 SQL 语句 ,有 时 可 能 会 发 生 第 1 条 执行 成 功 ,第 2 条 执行 失败 的 情 
况 , 从 而 对 数据 产生 破坏 。 


10.2.3 SQL 字符 串 中 含有 变量 的 书写 方法 


在 PHP 中 ,如 果 要 执行 SQL 语句 ,通常 将 SQL 语句 写 在 一 个 字符 串 中 。 对 于 下 面 
的 SQL 语句 : 


Select * from link where name= ' 搜 狐 ' 
如 果 要 把 它 写 成 字符 串 的 形式 , 则 形式 如 下 (因为 字符 串 常量 要 写 在 引号 中 ) ， 
$str= "Select * from link where name= "搜狐 "5 


这 样 就 能 从 link 表 中 查询 到 网 站 名 name 是 “搜狐 ”的 记录 信息 。 但 实际 查询 时 ,查询 
条 件 ( 如 此 处 的 “搜狐 ”) 通 常 是 从 表单 中 获取 的 ,如 $ webName 二 $ _POST['webname']。 
这 样 , 查 询 条 件 就 保存 到 了 字符 串 变量 $ webName 中 了 。 


1. SQL 中 藤 入 字符 串 变 量 的 情况 
字符 串 常 量 和 变量 之 间 可 以 使 用 连接 符 (. ) 连 接 在 一 起 ,因此 ,上 面 的 语句 可 改 为 ， 
$str= "select * fram link where name= ".$webName .7 


在 这 条 语句 等 号 右边 的 表达 式 中 ,实际 包括 如 下 三 部 分 内 容 , 即 两 个 字符 串 常量 和 一 
个 字符 串 变 量 ,它们 之 间 用 连接 符 *. ”连接 在 一 起 : 

第 一 部 分 ,字符 串 常 量 : "select * from link where name 一 "。 

第 二 部 分 ,字符 串 变量 : $ webName。 

第 三 部 分 ,字符 串 常 量 : ""。 

这 几 部 分 容易 引起 迷惑 的 是 ,为 什么 第 一 部 分 和 第 三 部 分 中 既 有 单 引 号 又 有 双 引 号 
呢 ? 其 实 , 两 边 的 双 引 号 就 是 表示 中 间 的 内 容 是 一 个 字符 串 常 量 。 其 中 的 单 引 号 和 别 的 
字符 (如 abcd) 一 样 , 只 是 这 个 字符 串 常量 的 内 容 而 已 。 同 样 , 对 于 第 三 部 分 来 说 ,两 边 的 
双 引 号 表示 这 是 一 个 字符 串 常 量 , 中 间 的 单 引号 就 是 它 的 内 容 。 

而 PHP 提供 了 双 引 号 字符 串 , 这 种 字符 串 中 可 包含 变量 ,因此 ,上 面 的 语句 又 可 
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写 为 : 
$str= "select * from link where name= '$wetName '" 
2. SQL 中 嵌入 数值 型 变量 的 情况 


如 果 SQL 语句 中 的 常量 是 数值 型 , 则 可 以 用 单 引 号 ' 括 起 来 (从 安全 性 方面 考虑 , 推 
荐 这 样 做 ) ,也 可 以 不 用 单 引号 括 起 来 。 例 如 : 





Select * from link where ID=5 
把 它 写 成 SQL 字符 串 就 是 : 

S$str= "Select * fram link where ID=5"; 

如 果 变 量 $linkid=5, 则 将 语句 中 的 数值 5 蔡 换 成 数值 型 变量 $linkid 后 的 字符 串 
如 下 : 

S$str= "Select * fram link where ID= ".S$linkid; 

可 见 它 由 两 部 分 组 成 , 即 前 面 的 "Select * from link where ID=" 是 字符 串 常量 ,后 
面 的 linkid 是 数值 型 变量 ,它们 之 间 用 连接 符 “. ”连接 起 来 。 

3，SQL 语句 中 含有 多 个 变量 的 情况 

在 SQL 语句 (尤其 是 Insert 语句 ) 中 ,经 常会 碰 到 一 条 SQL 语句 中 有 多 个 变量 的 情 
况 ,对 于 下 面 保存 在 $ str 中 的 Insert 语句 : 

$str= "Insert Into 1yb(author, title) values(" 芬 芬 ,大 家 好 !) "; 

如 果 变 量 $ user 一 劳 芬 , $ tit 二 大 家 好 1', 则 可 将 该 SQL 字符 串 改 写 为 : 

$str= "Insert Into 1yb (author, title) values('™" .$user . ™,'™.$tit . ™)"; 

可 见 它 由 五 部 分 组 成 ,分 别 是 字符 串 常量 "Insert Into lyb(author,title) Values("、 
字符 串 变量 $ user ,字符 串 常量 "',"、 字 符 串 变量 $ tit 和 字符 串 常量 ")" ,它们 通过 四 个 
“. "连接 起 来 。 


10.3 访问 MySQL 数据 库 


动态 网 站 、Web 应 用 程序 都 需要 数据 库 的 支持 。 将 网 站 数据 库 化 ,就 是 使 用 数据 库 
来 管理 整个 网 站 。 这 样 只 需 更 新 网 站 数据 库 的 内 容 , 网 站 页 面 内 容 就 会 自动 更 新 。 网 站 
数据 库 化 的 好 处 有 : 

(1) 可 以 自动 更 新 网 页 。 采 用 数据 库 管 理 , 只 要 更 新 数据 库 的 数据 ,网 页 内 容 就 会 自 
动 得 到 更 新 ,过 期 的 网 页 也 可 以 自动 不 显示 。 

(2) 加 强 搜索 功能 。 将 网 站 的 内 容 存储 在 数据 库 中 ,可 以 利用 数据 库 提 供 的 强大 搜 
索 功 能 ,从 多 个 方面 搜索 网 站 内 的 信息 。 
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(3) 可 以 实现 各 种 基于 Web 数据 库 的 应 用 。 用 户 只 要 使 用 浏览 器 ,就 可 以 通过 网 
络 , 查 询 或 存 取 位 于 Web 服务 器 数据 库 中 的 数据 ,实现 Internet 上 的 各 种 应 用 功能 。 例 
如 个 人 博客 、 网 上 购物 、 网 上 订 票 .银行 余额 查询 、 股 市 买卖 交易 以 及 网 上 择 友 等 。 

因此 ,很 多 人 认为 动态 网 站 就 是 使 用 了 数据 库 技术 的 网 站 ,这 种 说 法 虽 不 准确 ,但 足 
以 说 明 数 据 库 在 动态 网 站 中 的 扮演 着 重要 角色 。 


10.3.1 PHP 访问 数据 库 的 步骤 


PHP 之 所 以 最 适合 与 MySQL 数据 库 搭配 使 用 ,主要 原因 是 PHP 提供 了 很 多 操作 
MySQL 数据 库 的 内 置 函数 ,这 些 函 数 可 方便 地 实现 访问 和 操纵 MySQL 数据 库 的 各 种 需 
要 。PHP 访问 MySQL 数据 库 有 三 种 方式 : 

(1) 使 用 MySQL 内 置 函数 ; 

(2) 使 用 Mysqli 内 置 函数 ; 

(3) 使 用 PDO 数据 接口 层 。 

用 PHP 访问 MySQL 数据 库 的 一 般 步 又 如 下 ( 见 图 10-16) ， 


结果 集 





<2= $row['title];?> 





印 输 出 字段 到 页 面 
浏览 器 


服务 器 
数据 库 服务 器 Apache 
图 10-16 PHP 访问 MySQL 数据 库 的 一 般 步骤 


(1) 连接 数据 库 服务 器 并 选择 数据 库 ,这样 PHP 程序 就 与 数据 库 建 立 了 连接 ; 

(2) 创建 结果 集 。 即 通过 执行 查询 语句 将 数据 表 中 符合 条 件 的 行 读 取 到 服务 器 内 存 
中 ,此 时 内 存 中 保存 了 查询 得 到 的 “ 虚 表 ”, 就 称 为 结果 集 。 这 样 PHP 就 获得 了 访问 表 中 
数据 的 能 力 。 

(3) 绑 定 数据 到 页 面 。 即 输出 结果 集中 某 条 记录 中 一 个 或 多 个 字段 的 值 到 页 面 上 。 
PHP 通常 是 将 一 条 记录 存储 到 一 个 数组 中 ,再 输出 字段 对 应 的 数组 元 素 实现 的 。 

通过 以 上 三 步 ,网 页 上 就 可 以 显示 数据 库 表 中 的 数据 了 ,如 图 10-17 所 示 。 


ID tile sssa Contentssas author 三 = 人 email 
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图 10-17 使 用 浏览 器 显示 数据 库 中 的 数据 
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PHP 访问 MySQL 数据 库 的 具体 步骤 是 : 
(1) 建立 与 MySQL 服务 器 的 连接 ; 

(2) 设置 字符 集 ; 

(3) 选择 要 操作 的 数据 库 ; 

(4) 创建 结果 集 ; 

(5) 将 结果 集中 的 记录 读 入 数组 中 ; 

(6) 在 网 页 上 输出 数组 元 素 的 值 。 


10.3.2 连接 MySQL 数据 库 

要 连接 MySQL 数据 库 ,需要 先 连接 MySQL 服务 器 ,然后 设置 数据 库 的 字符 集 , 再 
选择 数据 库 , 就 可 以 和 指定 的 数据 库 建 立 连接 了 。 

1. 连接 MySQL 服务 器 

进行 MySQL 数据 库 操作 之 前 ,首先 要 与 MySQL 服务 器 建立 连接 。PHP 中 连接 
MySQL 服务 器 的 函数 是 mysql_connect()。 该 函数 语法 如 下 : 

Iesource mysql_oonnect (string hostname, string usemame, string password) 


函数 功能 是 : 通过 PHP 程序 连接 MySQL 数据 库 服 务 器 ,如 果 连 接 成 功 , 则 返回 一 
个 资源 类 型 的 MySQL 服务 器 连接 标识 (link_identifier) ,否则 返回 false。 例 如 : 

$conn= mysql_connect ("localhost", "root", "111"); 
表示 连接 主机 名 为 localhost 的 数据 库 服务 器 ,其 用 户 名 为 root ,密码 是 111。 

提示 : 连接 MySQL 服务 器 的 过 程 需 要 耗费 大 量 的 服务 器 资源 ,为 了 提高 系统 性 能 
及 资源 利用 率 , 如 果 在 同一 个 脚本 中 多 次 连接 同一 个 MySQL 服务 器 ,PHP 将 不 会 创建 
多 个 MySQL 服务 器 连接 ,而 是 使 用 同一 个 MySQL 服务 器 连接 。 


2. 设置 数据 库 字 符 集 
PHP 与 MySQL 进行 信息 交互 之 前 ,为 了 防止 中 文 乱码 ,必须 用 mysql_query() 方 法 


将 数据 库 字 符 集 设置 为 与 网 页 相同 的 字符 集 , 例 如 ,网 页 的 字符 集 是 gb2312 ,就 必须 将 数 
据 库 的 字符 集 也 设置 为 gp2312。 设 置 字符 集 的 代码 如 下 : 


mysql_ query ("set names 'gb2312'"); 


提示 : 在 Dreamweaver 8 版 本 中 新 建 的 网 页 字符 集 默认 是 gb2312, 而 Dreamweaver 
CS3 以 上 版 本 中 新 建 的 网 页 字符 集 默 认 是 utf-8, 在 Dreamweaver 中 ,执行 “修改 一 页 面 属 
性 ”菜单 命令 ,找到 “标题 /编码 ”选项 卡 ,在 “编码 ”下 拉 列 表 框 中 就 可 修改 网 页 的 字符 集 。 


3. 选择 数据 库 


由 于 MySQL 服务 器 中 可 以 有 多 个 数据 库 , 为 了 指定 要 访问 的 数据 库 , 需 要 使 用 
mysql_select_db() 方 法 设置 当前 操作 的 数据 库 。 例 如 ,选择 当前 数据 库 为 guestbook , 则 
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代码 如 下 : 





mysql select db("guestibook",$ conn)7 

对 于 一 个 动态 网 站 来 说 ,几乎 所 有 的 页 面 都 要 连接 同一 个 数据 库 。 为 此 ,可 将 连接 数 
据 库 的 代码 单独 写 在 一 个 文件 中 (该 文件 一 般 命名 为 conn. php) ,在 需要 连接 数据 库 的 网 
页 中 使 用 require 或 include 命令 包含 它 即 可 。 代 码 如 下 : 


1 

$conn= mysql_connect ("localhost", "root", "111"); // 连 接 数据 库 服务 器 
mysql_ query ("set names 'gb2312'"); // 设 置 字 符 集 
mysql_ select_ db ("guestbook", $conn); // 选 择 数据 库 

> 


10.3.3 创建 结果 集 并 输出 记录 


连接 了 数据 库 以 后 ,PHP 程序 只 是 和 指定 的 数据 库 建立 了 连接 ,但 数据 库 中 通常 有 
多 个 表 ,数据 库 中 的 数据 都 是 存储 在 表 中 的 。 为 了 在 页 面 上 显示 数据 ,必须 读 取 指定 的 表 
(全 部 或 部 分 数据 ) 到 内 存 中 来 ,这 称 为 创建 结果 集 (result) 。 结 果 集 可 以 看 成 是 内 存 中 的 
一 个 虚 表 , 由 若干 行 或 若干 列 组 成 。 结 果 集 带 有 一 个 记录 指针 ,在 刚 打 开 结果 集 时 指针 指 
向 结果 集中 第 一 条 记录 ( 若 结果 集 不 为 空 ) ,如 图 10-18 所 示 。 


false 





























= = 入 杂 ! 
结果 集 指针 记录 2 
记录 3 

false 


图 10-18 结果 集 示意 图 


使 用 mysqlL_query() 方 法 可 以 向 MySQL 服务 器 发 送 一 条 Select 语句 ,此 时 该 函数 将 
返回 一 个 结果 集 (result)。 代 码 如 下 : 


$result=mysql_query("select * from1yb",$conn);  // 创 建 结果 集 
1. 在 页 面 上 输出 整 条 记录 


结果 集 相 当 于 内 存 中 的 一 个 表 。 可 以 使 用 mysql_fetch_assoc() 等 函数 读 取 结 果 集 
中 的 一 行 到 数组 中 。mysql_fetch_assoc() 函 数 的 参数 是 一 个 结果 集 , 返 回 值 是 一 个 数组 ， 
该 数组 中 保存 了 结果 集 指 针 当 前 指向 的 行 ;如 果 结 果 集 指针 没有 指向 行 , 则 返回 false。 

然后 就 可 以 输出 数组 元 素 到 网 页 中 ,这 样 网 页 上 就 能 显示 数据 表 中 的 一 条 记录 了 。 
代码 如 下 : 


$row=mysql. fetch assoc ($result); // 取 出 结果 集中 当前 指针 指向 的 行 并 保存 到 数组 
echo $row['title'].' '.$row['author']." '.$row['erail']; // 输 出 数组 元 素 
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输出 结果 为 : 
祝 大 家 开心 唐三彩 sanyo8 tam-com 


其 中 , $ row 王 mysql_fetch_assoc($result) 的 作用 是 将 结果 集 指 针 当 前 指向 的 记录 
保存 到 数组 $row 中 ,然后 将 结果 集 指针 下 移 一 条 记录 ,如 图 10-19 所 示 。 


























(te 1 © A ([0] = 1[1] 
TTaY wy -> 
se | 机 大 家 … 鸭 一 女 ) 
-| 
结果 集 指 针 | 记录 
false 


图 10-19 mysql_fetch_* 函数 的 功能 


实际 上 ,PHP 提供 了 4 个 形 如 mysql_fetch_* () 的 函数 ,都 可 以 读 取 结 果 集 中 的 当 
前 记录 到 数组 中 ,并 将 结果 集 指 针 移 动 到 下 一 条 记录 。 这 4 个 函数 分 别 是 : 

(1) mysql_fetch_row(): 将 当前 记录 保存 到 一 个 索引 数组 中 。 

(2) mysql_fetch_assoc(): 将 当前 记录 保存 到 一 个 关联 数组 中 。 

(3) mysql_fetch_array() : 将 当前 记录 保存 到 一 个 含有 索引 和 关联 的 混合 数组 中 。 

(4) mysql_fetch_object() : 将 当前 记录 保存 到 一 个 对 象 中 。 

前 3 个 函数 的 区 别 仅仅 在 于 保存 记录 的 数组 不 同 。 例 如 ,假设 已 创建 了 一 个 结果 集 
$result, 则 可 以 分 别 用 这 3 个 函数 读 取 结果 集中 当前 记录 到 数组 中 ,再 打印 数组 出 来 。 
示例 如 下 : 

(1) 输出 mysql_fetch_row() 保 存 记 录 的 数组 。 


$row=mysql fetch row($result); 
Print r($row); 


输出 结果 为 : 


Array([0]=>1 [1]=> 祝 大 家 开心 [2]=> 非 常 感谢 大 家 的 帮助 [3]=> 唐 三 彩 [4]=> sanyo8 tom.cam [5]= 
> 59.51.24.37 [6]=> 2012- 03- 20 00:00:00 [7]=> 女 ) 


(2) 输出 mysql_fetch_ assoc() 保 存 记录 的 数组 。 


$row=mysql fetch assoc ($result); 
Print r($row); 


输出 结果 为 : 


Array([ID]=>1 [title]=> 祝 大 家 开心 [content]=> 非 常 感谢 大 家 的 帮助 [author]=> 唐 三 彩 [email]= 
> sanyo@ tam.oom [ip]=> 59.51.24.37 [date]=> 2012- 03- 20 00:00:00 [sex]=> 女 ) 


(3) 输出 mysql_fetch_array() 保 存 记 录 的 数组 。 


$rowrmysql fetch array ($result); 
Print r($row); 
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Array([0]=>1 [II=>1 [1]=> 祝 大 家 开心 [title]=> 祝 大 家 开心 [2]=> 非 常 感谢 大 家 的 帮助 
[content]=> 非 常 感谢 大 家 的 帮助 [3]=> 唐 三 彩 [author]=> 唐 三 彩 [4]=> sanyo8 tom.oom [email]=> 
sanyo@ tam.com [5]=> 59.51.24.37 [ip]= > 59.51.24.37 [6]=>2012- 03- 20 00:00:00 [date]=> 2012- 03- 20 00: 

00:00 [7]=> 女 [sex]=> 女 ) 

可 见 ,mysql_fetch_row() 返 回 的 数组 索引 是 数字 ,mysql_fetch_ assoc() 的 数组 索引 
是 字符 串 ( 表 的 字段 名 ) ,而 mysql_fetch_array() 的 数组 内 容 实际 上 是 上 面 两 个 函数 数组 
的 合集 , 它 同 时 保存 了 两 种 数组 元 素 。 

由 于 在 实际 开发 中 一 般 不 知道 要 输出 字段 的 序号 ,但 知道 字段 的 字段 名 ,因此 mysql 
_fetch_assoc() 比 mysql_fetch_row() 更 常用 。 而 mysql_fetch_array() 由 于 生成 的 数组 元 
素 太 多 ,占用 内 存 资源 ,建议 少 用 。 

(4) 输出 mysql_fetch_object() 保 存 的 记录 。 

mysql_fetch_object() 返 回 一 个 对 象 ,该 对 象 的 各 个 属性 中 保存 了 当前 记录 中 各 个 字 
段 的 值 。 通 过 “对 象 -二 字段 名 ?可 返回 当前 记录 中 某 个 字段 的 值 。 例 如 

$row=mysql. fetch cbject ($result); // 将 当前 记录 保存 到 对 象 $row 中 

echo $row- > title; /| 输出 title 字 段 的 值 ,如 * 祝 大 家 开心 ” 


2. 在 页 面 上 输出 单个 字段 


创建 了 结果 集 后 ,使 用 mysql_result() 函 数 可 以 返回 结果 集 指针 当前 指向 记录 的 某 
个 字段 值 。 该 函数 语法 为 : mysql_result(result, row， field) ,其 中 ,result 为 一 个 结果 集 
资源 ,row 用 来 指定 行 号 ( 行 号 从 0 开始 ) ,field 是 字段 名 或 字段 序号 。 例 如 : 


echo mysql._ result ($result,1, 'author'); // 输 出 "小 神 马 " 


就 可 以 输出 结果 集中 第 二 条 记录 的 author 字段 的 值 。 输 出 完 之 后 ,mysql_result() 函 数 
也 会 将 结果 集 指 针 移动 到 下 一 条 记录 。 


3. 通过 循环 输出 所 有 记录 


如 果 要 输出 结果 集中 的 所 有 记录 ,可 以 将 mysql_fetch_assoc() 放 在 循环 语句 中 执 
行 , 这 样 第 一 次 循环 时 将 取出 第 一 条 记录 到 数组 中 .然后 结果 集 指针 下 移 一 条 记录 。 第 二 
次 循环 时 将 取出 指针 指向 的 第 二 条 记录 ,结果 集 指 针 又 下 移 一 条 记录 。 如 此 循环 ,直到 结 
果 集 指针 指向 了 结果 集 的 末尾 (最 后 一 条 记录 之 后 ) 才 停止 循环 。 但 是 这 样 只 能 输出 每 条 
记录 的 内 容 (每 个 字段 值 )。 如 果 要 以 表格 的 形式 输出 结果 集 , 则 必须 用 HTML 标记 定 
义 表 格 ,再 将 结果 集中 的 字段 值 输出 到 每 个 单元 格 志 td 之 中 。 

下 面 是 一 个 将 表 lyb 中 数据 显示 在 页 面 上 的 完整 程序 。 其 运行 结果 如 图 10-20 
所 示 。 





< /* 连接 数据 库 * / 
S$conn= mysql_connect ("localhost", "root", "111"); // 连 接 数 据 库 服 务 器 
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mysql_query("set names 'go?312""); // 设 置 字符 集 

mysql._ select db ("guestibook", $conn); // 选 择 数 据 库 

$result=mysql query("Select * from lyb"Sconn); // 创 建 结果 集 

> 

< =------------ 在 页 面 上 显示 数据 库 中 的 记录 -------------------- > 


< tr bgcolor= "#e0e0e0"> 
<th> 标 题 < /th><th widthrm0o> 内 容 </t><th width="60> 作 者 </th> 
<th> email< /th><th width= "80"> 来 自 < /tb>< /tr> 
坟 迷 // 循 环 输出 记录 到 页 面 上 
while ($row=mysql _fetch assoc($result)){ > 
<tr><tdp<2S$row['title']?>< /to><td> < $row['ontent']?> < /td> 
<td>< $row['author']?>< /to><to><s= $row['amnail']2>< /to> 
<tdp<2S$row['ip']?></td>< /tr> 






































<? } ?> 
</table> 
内 容 enail 
诽 常 感谢 大 家 的 帮助 ta@ton. com |202. 103. 56.6 
请 玫 个 问题 。 了 起 好 中 的 文件 如 位 rerweag. com [127.0.0.1 
这 是 测试 留言 i tang®@163. COM |192. 168.0.1 
第 五 条 留言 话 古 巴比伦 的 大 草原 上 | 阶 志 ruxh@sohu. com|127.0.0.1 加 
图 10-20 程序 10-2. php 的 运行 结 ! 
说 明 : 


(1) 本 程序 分 为 三 部 分 : 第 一 部 分 是 连接 数据 库 服务 器 和 选择 数据 库 ;第 二 部 分 是 
利用 mysql_query() 方 法 创建 结果 集 ;第 三 部 分 是 用 while 循环 读 取 结果 集中 的 所 有 
记录 。 

(2) 刚 打 开 结 果 集 时 ,指针 指向 第 一 条 记录 ,执行 mysql_fetch_assoc( $ result) 方 法 
会 先 将 这 条 记录 赋 给 数组 $ row, 然 后 使 指针 移 到 下 一 条 记录 ,这 样 第 二 次 循环 时 将 输出 
第 二 条 记录 。 当 指针 移动 到 最 后 一 条 记录 之 后 时 ,该 方法 将 返回 false, 这 样 $row 的 值 
也 变 成 false, 循 环 将 不 再 继续 。 

想 一 想 : 


<? while ($rowmysql fetdh assoc ($result)){ > 
能 否 改 为 ; 
<?vhile (mysql fetd assoc($result)) {$rowr=mysql fetch assoc($result)7 2 


(3) 由 于 每 次 循环 显示 一 条 记录 ,而 每 条 记录 显示 在 一 行 中 ,因此 while 循环 的 循环 
体 是 一 对 二 tr 二 … 三 /tr 二 标记 中 的 内 容 。 
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(4) 字段 名 是 区 分 大 小 写 的。 假如 将 $ row[L'title]] 写 成 $ row[L'Title], 则 该 字段 值 无 
法 输出 。 

提示 : 从 该 程序 可 以 看 出 ,PHP 程序 无 法 用 一 条 语句 将 结果 集 (整个 表 ) 按 原样 输 
出 ,而 只 能 利用 循环 将 结果 集中 记录 一 条 一 条 地 输出 。 





4. 输出 指定 的 n 条 记录 


如 果 不 想 输出 所 有 记录 ,只 想 输出 结果 集中 的 前 n 条 记录 ,那么 至 少 有 两 种 方法 ,一 
种 是 使 用 for 循环 ,限定 循环 次 数 为 n; 第 二 种 方法 是 修改 SQL 语句 为 Select * from lyb 
limit n, 这 样 结果 集中 就 只 及 n 条 记录 。 推 荐 用 第 二 种 方法 ,因为 前 一 种 方法 虽然 只 在 页 
面 上 输出 n 条 记录 ,但 实际 上 已 经 把 所 有 的 记录 都 读 取 到 了 结果 集中 ,占用 了 内 存 。 


5. 返回 记录 总 数 mysql_num_rows() 

该 函数 可 以 返回 结果 集中 的 记录 总 数 ,其 参数 是 一 个 结果 集资 源 。 例 如 : 
< 了 > 共有 < 2mYsqL mm rows ($result) > 条 记录 < /p> 

6. mysql_db_query() 函数 


mysql_db_query() 函 数 可 以 同时 选择 数据 库 和 创建 结果 集 。 它 相当 于 把 mysql_ 
select_db 和 mysql_query 两 个 函数 的 功能 集成 到 了 一 起 。 例 如 : 


mysql_select db ("guesthbook", $conn); // 选 择 数据 库 
$result=mysql. query ("Select * from 1yb",$conn); // 创 建 结果 集 


可 以 用 mysql_db_query() 改 写 为 ， 
$result=mysql_db_query('guestibook',"Select * from 1]yb"Sconn)7 
7. 释放 结果 集 mysql_free_result() 


结果 集 包 含 的 记录 会 占用 服务 器 内 存 , 虽 然 在 程序 代码 执行 结束 后 会 自动 释放 结果 
集 占 用 的 内 存 , 但 建议 在 适当 时 候 使 用 mysql_free_result() 释 放 内 存 , 例 如 ， 


mysql free result ($result); 
8. 关闭 数据 库 连接 mysql_close() 
使 用 mysql_close() 函数 可 以 关闭 使 用 mysql_connect() 函 数 建立 的 连接 。 例 如 : 


mysql_ close ($conn) 7 


10.3.4 使 用 mysql_query() 增 、 删 、 改 记录 


除了 将 数据 表 中 的 数据 显示 在 页 面 上 .有 时 还 希望 通过 网 页 对 数据 库 执行 添加 、 删 除 
或 修改 操作 。 比 如 在 网 页 上 发 表 留 言 就 是 向 数据 表 中 添加 一 条 记录 。 
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1. 利用 insert 语句 添加 记录 


利用 SQL 语言 的 Insert 语句 可 以 执行 添加 记录 操作 ,而 使 用 mysql_query 方法 实际 
上 可 以 执行 任何 SQL 语句 ,因此 利用 该 方法 执行 一 条 insert 语句 ,就 可 以 向 数据 表 中 添 
加 一 条 记录 。 示 例 代码 如 下 : 


<? reqire('com.php'); 

mysql_query ("insert into 1yb (title, oontent, author, email ‘date”) values(' 大 家 好 'EHP 学 习 园 地 9， 

小 浣熊 '，'sdf@ sd.caom','2012- 3- 3)") or die(' 执 行 失败 '); 

echo 新 增 记录 的 id 是 '.mysql_insert id(); /可 选 ,输出 新 记录 的 ia 

2> 

说 明 : 

(1) 本 程序 分 为 两 部 分 : 第 一 部 分 是 连接 数据 库 , 由 于 连接 数据 库 的 代码 已 写 在 
conn. php 文件 中 ,因此 在 这 里 直接 利用 require 函数 调用 该 文件 ;第 二 部 分 是 利用 mysql 
_query 方法 添加 记录 。 

(2) mysql_query 只 有 在 执行 查询 语句 时 才 会 返回 结果 集 , 在 添加 记录 时 不 会 返回 结 
果 集 ,因此 在 mysql_query 前 不 必 写 *$ result 二 ”, 如 果 写 了 , 则 $result 的 值 为 false。 

(3) 用 insert 语句 一 次 只 能 添加 一 条 记录 ,如果 要 添加 多 条 ,可 以 逐条 添加 或 用 循环 
语句 。 

(4) mysql_insert_id() 函数 可 以 返回 上 一 步 insert 查询 中 新 增 记 录 的 自动 递增 字段 
的 值 。 

(5) die(msg) 函数 的 功能 是 输出 一 条 消息 msg, 并 退出 当前 脚本 ,等 价 于 exit() 函 数 。 


2. 利用 delete 语句 删除 记录 


当 管 理 员 希望 删除 某 些 留 言 时 ,就 需要 在 数据 库 中 删除 记录 ,可 以 利用 mysql_query 
方法 执行 一 条 delete 语句 来 删除 记录 。 下 面 是 一 个 例子 。 


<? reqhire('oomn.php'); 

my qery(" Delete fran 1yb ihere ID in(158,162,163,169)") or die(' 执 行 失败 ); 

> 

本 次 操作 共有 二 ?二 mysql_affected_rows() ? 二 条 记录 被 删除 ! 

mysql_affected_rows() 可 返回 此 次 操作 所 影响 的 记录 行 数 。 如 果 这 次 有 4 条 记录 被 
圳 除 ,那么 影响 的 行 数 就 是 4, 该 函数 将 返回 4。 

提示 : 使 用 mysql_query 方法 执行 insert、 delete、update 语句 ,都 可 以 用 mysql_ 
affected_rows() 函 数 返回 受 影响 的 记录 行 数 ,但 如 果 执 行 delete 语句 时 没有 指定 Where 
子 句 (此 时 所 有 记录 都 将 被 删除 ), 则 mysql_affected_rows() 会 返回 0, 而 不 是 实际 被 删除 
的 记录 数 。 
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3. 利用 update 语句 更 新 记录 


当 需 要 修改 某 条 留言 时 ,就 需要 用 mysql_query 方法 执行 update 语句 更 新 记录 。 
例如 : 


<? reqire('comn.php'); 

mysql_ query ("Update 1yb set email= 'rong@ 163.c0om', author= ! 艾 医 ' where ID> 133 and ID< 143") or die(' 

执行 失败 '); 

2> 

这 样 将 修改 符合 条 件 的 记录 。update 语句 常用 来 记录 新 闻 页 面 的 单 击 次 数 , 假 设 单 
击 次 数 记录 在 hits 字段 中 。 只 要 在 显示 某 条 新 闻 的 页 面 的 适当 位 置 加 入 如 下 这 条 语句 
就 可 以 了 。 

mysql_ query ("update news set hits= hits+ 1 where id= '".$S GET['id']." 7 

这 样 每 打开 一 次 这 个 新 闻 页 面 ,都 会 执行 这 条 SQL 语句 ,使 单 击 次 数 (hits 字段 ) 
加 1。 


10.4 增删 改 记 录 的 综合 实例 

本 节 介绍 一 个 综合 实例 , 它 能 通过 网 页 对 数据 表 中 的 数据 进行 添加 删除 和 修改 操 
作 。 该 程序 包括 数据 记录 管理 主 界面 ,添加 记录 模块 .删除 记录 模块 和 修改 记录 模块 。 
10.4.1 管理 记录 主页 面 的 设计 


我 们 可 以 对 10-2. php 稍 做 修改 ,使 其 在 显示 记录 的 基础 上 增加 添加 、 删 除 和 修改 记 
录 的 链接 ,分 别 链接 到 添加 、 删 除 和 修改 记录 的 PHP 文件 上 。 将 这 个 网 页 作为 管理 留言 
的 首页 ,命名 为 10-6. php ,程序 代码 如 下 ,运行 效果 如 图 10-21 所 示 。 


<? require('conn.-php")7 // 连 接 数据 库 
$result=mysql_ query("Select * from 1yb",$conn); // 创 建 结 果 集 
> 


<a hre 伍 "addform.php"> 添 加 记录 < /a> 
< table border= "1" width= "95%"> 
< tr bgcolor= "#e0e0e0"> 
<th> 标 题 < /th><th> 内 容 </th><th> 作 者 < /thb><th>email< /th> 
<th> 来 自 < /th><tt> 删 除 < /th><th> 更 新 < /th> < /tr> 
<? while ($rowmysql fetdh assoc ($result)){ // 显 示 结 果 集中 记录 
> 
<tr><tod><=$rw['ID'] ></to><to>< $row['content'] >< /to> 
<to<$row['author'] P< /to><to> < $row['emil'] >< /to> 
<to< $row['ip'] >< /to> 
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<td><a href= "delete.php?id=-< = $row['D'] > 吃 删 除 < /a>< /td 
<td> <a href= "editform.php?id=< 2 汪 $row['ID'] > 吃 更 新 </a>< /td> 












































</tr> 
<?2 } 2 
</table> 
两 容 作者 email 来 自 
腓 常 感谢 大 家 的 帮助 ” ”| 胡 积 分 xta@tom. com [202.103.56.6 
请 款 个 问题 cil 唐三彩 renw@qq. com |127.0.0.1 
出 rd 王 承 苍 tane@163.COM |192. 168.0.1 
人 党 五 条 留言 在 古巴 比 伦 的 大 草原 上 障 志 yuxh@sohu. com |127.0.0.1 
图 10-21 程序 10-6. php 的 运行 效果 
说 明 : 


(1) 请 注意 代码 中 的 “删除 ” 超 链 接 : 
<a href= "delete.php?id=< 守 $row['ID'] 交心 删除 < /a> 


其 中 ,二 ?二 $row[LID] ? 二 会 输出 这 条 记录 ID 字段 的 值 .而 每 条 记录 的 ID 字段 值 
都 不 相同 ,因此 ,所 有 记录 后 的 “删除 ? 超 链 接 虽 然 都 是 链接 到 同一 页 面 (delete. php) ,但 
带 的 id 参数 值 不 同 , 这 样 就 可 以 将 这 条 记录 的 id 参数 值 传递 给 delete. php。 

例如 ,如 果 这 条 记录 的 ID 字段 值 为 4, 则 这 个 超 链接 实际 上 为 : 


<a href= "delete.php?id= 4 必 > 删除 < /a> 


在 delete. php 中 ,就 可 以 用 $_GET[] 获 取 这 个 id 值 。 再 根据 该 id 值 ,删除 对 应 的 
记录 。 对 于 更 新 记录 的 超 链接 也 是 同样 的 道理 。 

(2) 在 有 些 程序 中 ,删除 和 更 新 不 是 使 用 的 超 链接 ,而 是 使 用 表单 中 的 按钮 ,如 果 要 
使 用 按钮 ,只 要 将 

<a href- "editform.Fhpzid < 2 Srow['ID'] 六 必 更 新 </a> 
替换 成 : 

< form action= "editform.php?id=< 2 $row['ID'] 2> " method "post"> 

<input type= "sutmit" value= 喝 新 "> 

< /fomr> 

该 表单 的 作用 仅仅 是 利用 action 属性 来 传递 URL 参数 ,表单 并 没有 向 处 理 页 提交 
任何 内 容 。( 注 意 ,method 属性 不 能 省 略 , 想 一 想 把 method 属性 设置 为 get 还 可 以 吗 ?) 

(3) 如 果 和 希望 用 户 在 单 击 * 删 除 ? 链 接 后 弹出 一 个 确认 框 询 问 用户 是 否 确定 删除 ,可 
以 将 10-6. php 中 “删除 ” 超 链接 的 代码 修改 为 : 
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<a href= "delete.php?id=< 2 $row['ID'] ?2>" onclick= "retum confirm(" 确 认 要 删除 吗 ? ')"> 删 除 </ 

EP 

这 样 ,由 于 onclick 事件 中 的 代码 会 先 于 href 属性 执行 ， 
因此 当 用 户 单 击 超 链接 时 ,将 先 弹出 确认 框 ( 见 图 10-22) ,如 和 
果 单 击 确认 框 中 的 “取消 ?按钮 , 则 confirm() 函数 将 返回 Ew | 
false, 本 次 单 击 超 链接 的 行为 将 失效 ,就 不 会 再 链接 到 
delete. php 进行 删除 了 。 图 10-22 删除 确认 框 


10.4.2 添加 记录 的 实现 


当 用 户 单 击 图 10-21 中 的 “添加 记录 ”时 ,就 会 转 到 addform. php。 该 网 页 是 个 纯 静 
态 网 页 , 它 含 有 一 个 表单 ,用 户 可 在 表单 中 输入 留言 内 容 。 其 代码 如 下 ,运行 效果 如 
图 10-23 所 示 。 





Internet Erplorer ME 





<h2 alignr "center"> 请 您 在 下 面 填写 留言 < /hb2> 
< form method= "post" action= "insert.php"> 
< table width= "400" border= "1" align= "oenter" oellpadding= "2"> 
<tr><tqdwidth= "25"> 留 言 标题 :< /td> 
< td width= "275"> < input type= "text" name= "title"> * < /to>< /tr> 
<tr><t 中 留言 人 :< /td> 
< to> < input type= "text" name= "author"> * < /td> < /tr> 
<tr><t 中 联系 方式 :< /td> 
<td> < input type= "text" name= "email"> * < /td> < /tr> 
<tr><td 留 言 内 容 :< /td> 
<td> < textarea name= "oontent"” cols=- "30" rows= "2"> < /textarea>< /to> < /tr> 
<tr><td> gnbsp;< /td><td>< input type= "sutmit" value= "得 交 "></to>< /tr> 
< /table> < /form> 


Nicrosoft Internet Explorer 


http://localhost/addf 





























10-23 ”添加 留言 addform. php 的 主 界面 
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单 击 “ 提 交 ” 按 钮 ,表单 中 的 数据 就 会 提交 给 insert. php, 该 程序 首先 用 $ _POST 获 
取 表 单 中 的 数据 ,然后 用 mysql_query 方法 执行 insert 语句 ,将 用 户 输入 的 数据 作为 一 条 
记录 插入 到 lyb 表 中 。 代 码 如 下 ,执行 过 程 如 图 10-24 所 示 ,这样 用 户 的 留言 就 添加 到 了 
数据 表 中 。 





<? //cb start(); 

require ('comn.php'); 

$title=$ POST["title"]; // 获 取 表 单元 素 的 值 
Sauthor= $ _FOST["author"]; 

$email=$ POST["email"]; 

$oontent=$_POST["content"]; 

$ip=$_SERVER['REMOTE ADCR'];  // 获 得 客户 端 他 地 址 

$sq= "insert into lyb(title,author,arail, ontent, ip, ‘date’) values('$title', '$author', '$email', '$content 
"$ip', 'date(Y-m- dh:i:s) )"; 

//ecdho $sql; 输出 sq 语句 ,用 于 调试 ,可 删除 
mysql_ query($sql) or die(' 执 行 失败 '); 

heager ("Iocation:10- 6.php"); // 插 入 成 功 后 ,自动 转 到 首页 






@ 执 行 插入 命令 
插入 到 数据 表 中 


@ 获 取 用 户 输入 的 数据 


Sititle=S_POST["title"] 
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图 10-24 添加 记录 的 步骤 


说 明 : 

(1) 该 程序 中 的 insert 语句 较 长 ,因此 将 其 放 在 一 个 变量 ($sql) 中 。 这 样 做 的 另 一 
个 好 处 是 ,如 果 SQL 语句 有 错误 , 则 可 以 先 输出 该 SQL 语句 ,便于 调试 。 

(2) 对 于 记录 中 自动 递增 字段 的 值 ( 如 ID 字段 ) ,系统 会 自动 生成 ,切忌 不 要 用 insert 
语句 插入 自动 递增 字段 的 值 ,否则 易 引 起 错误 。 


10.4.3 删除 记录 的 实现 


在 图 10-21 中 单 击 “删除 ?链接 时 ,就 会 执行 delete. php 程序 ,该 程序 先 获 取 从 超 链接 
传递 过 来 的 记录 id 参数 ,然后 用 delete 语句 删除 id 对 应 的 记录 ,过 程 如 图 10-25 所 示 。 


Ls require ('com.php'); 
$id= intval ($_GET['id"]); // 获 取 10- 6.php 传 来 的 ia 参 数 并 转换 为 整 型 
$sql= "delete from 1yb where ID= $id"; 
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if(mysql query ($sql) && mysql affected rows()==1)  ” // 执 行 sq 语句 并 判断 执行 
// 是 否 成 功 
echo "< script> alert ("删除 成 功 !1');location.href= '10- 6.php'< /script> "; 
else 





echo "< script> alert ("删除 失败 1') ;location.href= '10- 6.php'< /script> "; 





> 

@ 执 行 删除 命令 

删除 对 应 的 记录 外 获取 记录 ID 

$id=$_GET[id] 
Apache 浏览 器 
图 10-25 删除 记录 的 步骤 

说 明 
(1) 在 第 二 行 中 使 用 了 intval 函数 将 获取 到 的 id 参数 强制 转换 为 整 型 ,虽然 在 一 般 


情况 下 不 转换 也 可 以 ,但 这 样 做 的 好 处 是 可 以 防止 非法 用 户 在 浏览 器 地 址 栏 中 手工 输入 
一 些 非 数 值 型 的 id 参数 ,如 “id 一 ”破坏 系统 。 

(2) 如 果 mysql_query 函数 执行 了 一 条 合法 的 SQL 语句 (无 论 是 否 有 记录 被 删除 ) ， 
那么 该 函数 将 返回 true, 和 否则 返回 false。 因 此 mysql_query 返回 true 并 不 表示 一 定 有 记 
录 被 删除 。 为 此 程序 采用 mysql_affected_rows() 判 断 是 否 有 记录 被 删除 。 


10.4.4 同时 删除 多 条 记录 的 实现 


在 电子 邮件 系统 中 ,允许 用 户 选中 多 封 邮件 后 将 其 一 并 删除 ,这 就 是 同时 删除 多 条 记 
录 的 例子 。 我 们 可 以 对 图 10-21 中 的 10-6. php 做 些 修改 ,将 每 条 记录 后 的 “删除 ” 超 链 接 
换 成 一 个 多 选 框 , 青 在 最 后 一 行 添加 一 个 “删除 ”按钮 ,代码 如 下 ,运行 结果 如 图 10-26 
所 示 。 


<? reqire('conmn.php'); 


if($ GET["del"]==1){ // 如 果 用 户 按 了 别 除 " 接 钮 
$selectid=$ POST["selected"]; // 获 取 所 有 选中 多 选 框 的 值 ,保存 到 数组 中 
证 (count($selectid)> 0){ // 防 止 selectia 值 为 空 时 执行 SQL 语句 出 错 


$sel= implode (', ',$selectid); // 将 各 个 数组 元 素 用 "," 号 连接 起 来 
mysql_query ("delete From 1yb where ID in($sel)") or die(' 执 行 失败 '); 
header ("Tocation:delall .php"); // 删 除 完毕 ,刷新 页 面 
i 
else echo ' 没 有 被 选中 的 记录 '; 
} 
$result=mysql query("Select * from 1yb",$oonn); // 创 建 结果 集 
EE 
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< form method- "post" action= "?de]=1">< !- -表单 提交 给 自身 --> 
< table border= "1" width= "95%"> 
< tr bgcolor= "4e0e0e0"> 
<th> 标 题 < /th>< th> 内 容 ……< th> 删 除 < /th><th> 更 新 < /th>< /tr> 
<? while($row=mysql fetch assoc($result)){ 
> 
<tr><to> < $row['title']?> < /td> <to> < $row['oontent'] 2 < /td> 
<to<$row['author'] ?> < /td> <to>< $row[l'enil']?>< /td> 
<td<2-S$row['ip']2></td> 
<td align= "center"> 
< input type= "checkbox" name= "selected[]" value= "< = $row['ID']?> ">< /td> 
<!-- 复 选 框 --> 
<td> <a href= "editfom.php?id=< 三 $row['ID']?> > 更 新 < /a>< /to>< /tr> 
<? } ?> 
< tr bgcolor= "#EOEOEO"> 
<top</to<too</to<to</t<to</t<to< /to 
< td align= "center"> < input type= "submit" value= " 别 除 ">< /td><!-- 删 除 按钮 --> 
<td</td></tr> 
< /table> < /fom> 





内 容 作者 enail 来 自 
| 祝 大 家 开心 齐 常 感谢 大 家 的 帮助 大 积 分 ta@tom. com |202. 103.56.6 








请 教 个 问题 | 虚拟 目录 中 的 文件 如 何 预览 | 唐三彩 renw@qq. com |127.0.0.1 
辽 是 测试 留 学 习 ASP 程 序 设计 的 过 程 真 
言 是 其 乐 无 穷 





|tang@163.COK |192.168.0.1 





第 五 条 留言 | 在 古巴 比 伦 的 大 草原 上 志 [yuxh@sohu. con |127.0.0.1 
































图 10-26 ”delall. php 的 运行 结果 


说 明 : 

(1) 每 条 记录 后 的 多 选 框 的 name 属性 值 是 静态 的 “selected[ ]”, 因 此 循环 以 后 所 有 
记录 多 选 框 的 name 属性 值 都 是 selected[] ,而 多 选 框 的 value 属性 值 是 动态 数据 二 ?= 
$row[TID]? 之 , 则 循环 后 每 条 记录 多 选 框 的 value 属性 值 都 是 其 id 字段 值 。 我 们 知道 ， 
如 果 有 多 个 多 选 框 的 name 属性 值 相同 ,那么 提交 的 数据 就 是 selected[] 一 2&selected[] 一 
3&. selected[]=5 的 形式 。 因 此 ,在 该 程序 中 ,如 果 用 户 选 中 多 条 记录 (比如 选中 2、3、5 
条 记录 ), 则 $_POST[L"selected"] 是 一 个 数组 : Array([0] 一 之 2[1] 一 >>3[2] 一 之 5) ,用 
implode 函数 将 该 数组 中 的 元 素 用 逗号 连接 起 来 ,就 得 到 字符 串 和 那么 最 终 
执行 的 SQL 语句 就 是 Delete From lyb where id in("2,3,5")。 这 是 一 条 正确 的 SQL 语 
句 , 因 此 会 删除 第 2、3、5 条 记录 。 

(2) 本 程序 将 表单 界面 和 删除 记录 的 程序 写 在 了 同一 个 文件 中 ,方法 是 通过 action 
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属性 将 表单 提交 给 自身 而 不 是 其 他 文件 ,但 增加 了 一 个 URL 字符 串 ,处理 程 序 据 此 判断 
是 否 提交 了 表单 。 


10.4.5 修改 记录 的 实现 


修改 记录 的 过 程 分 为 两 阶段 : 

(1) 第 一 阶段 是 提供 一 个 显示 待 修 改 记 录 的 表单 ,该 表单 显示 待 修 改 记录 各 个 字段 
的 值 , 以 供用 户 修改 记录 中 的 信息 。 显 示 待 修改 记录 的 程序 editform. php 代码 如 下 ,其 
程序 流程 如 图 10-27 所 示 。 运 行 结果 如 图 10-28 所 示 。 








<? reqire('com.php'); 
S$id intval ($_GET["id"']); /将 获取 的 记 强 制 转 换 为 整 型 
$sql= "Select * fram lyb where ID-$id"; ”// 获 取 待 更 新 的 记录 
$result=mysql_ query ($sql,$coonn); 
$row=mysql fetch assoc ($result); // 将 待 更 新 记录 各 字段 的 值 存 人 数组 中 
> 
<h2 align= "center"> 更 新 留言 < /h2> 
< form method= "post" action= "edit .php?id=< = $row['ID'] > "> 
< table width= "400" border= "1" aligr= "center" oellpadding= "2"> 
<tr><tdwidth="125"> 留 言 标 题 :< /td> 
<td widde "275"> < irput type= "text" nane= "title" value="< = $row['title'] 2 "> # </to> 
<f> 
<tr><t 中 留言 人 :< /td 
<td> < input type= "text" name= "author" value= "< = Srow['author'] 2 "> * </to</tr> 
<tr><t 中 联系 方式 :< /td 
<td> < input type= "text" name= "email" value= "< = Srow['email'] ?> "> * 
</td>< /tr> 
<tr><to> 留 言 内 容 :< /td> 
< td> < textarea name= "content" cols= "30" rows= "2"> < = $row['content']?> 
< /textarea> 
< /td>< /tr> 
<tr><td> snbspi< /td> <td> < input type= "submit" value= 哺 定 >< /to>< /tr> 
< /table> < /fom> 


@ 根 据 记录 ID 
创建 结果 集 $id=$_GET['id'] 


@ 输 出 字段 值 到 表单 





图 10-27 修改 记录 的 过 程 (第 一 阶段 ) 
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文件 四 儿 外 
旺 西国 | 乱 http://1ocslhost/guestbook/add asp?id=4 -| [SE 






































图 10-28 程序 editform. php 的 运行 结果 


说 明 : 

QO 该 程序 界面 和 addform. php 的 界面 很 相似 ,但 区 别 是 表单 中 显示 了 一 条 记录 的 信 
息 。 它 首先 根据 首页 传 过 来 的 id 值 , 执 行 查询 找到 这 条 记录 ,然后 将 其 显示 在 表单 中 ,由 
于 只 有 一 条 记录 ,所 以 不 需要 用 到 循环 语句 。 

@ 请 注意 将 动态 数据 显示 在 表单 中 的 方法 。 对 于 单行 文本 框 , 它 在 初始 时 会 显示 
value 属性 中 的 值 ,因此 只 要 给 其 value 属性 赋值 就 可 以 了 ,如 value= 二 "二 ?= $ row['title] 
?二 "; 对 于 多 行文 本 域 , 它 在 初始 时 会 显示 标记 中 的 内 容 , 因 此 将 动态 数据 写 在 标记 中 
即 可 。 

@ 表单 传递 id 给 表单 处 理 程 序 有 两 种 方法 : 一 是 使 用 上 述 代 码 中 的 URL 字符 串 方 
式 (action 二 "edit. php?id 一 二 ?一 $row[TD];? 之 "); 二 是 使 用 表单 隐藏 域 传递 ,比如 在 
editform. php 的 表单 中 添加 一 个 隐藏 域 ， 


< input type= "hidden" name= "id" value= "< = $row['ID'];?> " /> 


(2) 修改 记录 的 第 二 阶段 是 : 当 用 户 单 击 “ 确 定 ” 按 钮 提交 表单 后 ,浏览 器 将 与 服务 
器 进行 第 二 次 通信 。 修 改 记录 处 理 程序 edit. php 首先 获取 从 二 form 记 标记 中 传递 过 来 
的 id 值 ,并 获取 表单 中 填写 的 数据 ,根据 id 值 和 表单 数据 修改 该 id 对 应 的 记录 ,其 过 程 
如 图 10-29 所 示 。 


名 获 取 记录 ID 


图 根据 记录 ID 
和 表单 中 的 数 $id=$_GET['id'] 


据 修改 记录 
加 获取 表单 中 数据 





数据 库 Apache 浏览 器 
10-29 ”修改 记录 的 过 程 (第 二 阶段 ) 





修改 记录 的 执行 程序 (edit. php) 的 代码 如 下 : 
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<? reqire('com.php'); 

$ig- intval ($_GET["id"]); // 获 取 记 录 i 

$title=$ POST["title"]; // 获 取 表 单 中 数据 

$author=$ POST["author"]; 

S$email=$ POST["email"]; 

$content=$_ POST["content"]; 

$ip=$ SERVER['REMOTE ADCR']; // 获 取 窜 户 端 下 

$sql= "Update 1yb Set title= '$title',author= '$author',erail= '$email',omtent— 

'$content' Where ID= $id"; 

mysql_ query ($sql) or die(' 执 行 失败 '); 

echo "< script>alert ("留言 修改 成 功 !') ;location.href= '10- 6.php';< /script> "; 

2> 

说 明 : 

Q@ Update 语句 根据 传 过 来 的 id 找到 要 修改 的 留言 ; 

@ 更 新 完成 后 本 程序 采用 输出 客户 端 脚本 的 方法 (location. href) 转 向 首页 ,用 来 替 
代 header 语句 ,这 样 做 的 好 处 是 可 以 在 返回 之 前 弹出 一 个 警告 框 提示 用 户 “ 留 言 修 改 成 
功 ”, 而 header 方法 则 无 法 在 转向 之 前 输出 任何 警告 框 之 类 的 JavaScript 的 脚本 , 想 一 想 
为 什么 。 因 此 前 面 几 个 程序 的 header 语句 都 可 以 换 成 这 句 ,以 增加 弹出 警告 框 提示 用 户 
的 功能 。 


10.4.6 查询 记录 的 实现 


动态 网 站 的 一 个 明显 优势 是 能 够 让 用 户 在 网 站 内 快速 搜索 到 符合 条 件 的 内 容 , 如 搜 
索 某 种 商品 、 某 条 新 闻 等 。 如 果 网 站 中 所 有 的 记录 都 存放 在 同一 个 表 中 , 则 只 要 借助 于 
Select 语句 的 模糊 查询 功能 ,就 能 方便 地 按照 条 件 查询 到 相关 记录 。 

查询 记录 程序 的 流程 如 下 : 首先 提供 一 个 文本 框 供用 户 输入 要 查询 的 关键 字 , 然 后 
将 用 户 提交 的 关键 字 作 为 条 件 用 Select 语句 进行 查询 ,最 后 将 查询 的 结果 (返回 的 结果 
集 ) 显 示 在 网 页 中 。 下 面 在 程序 10-2. php 的 基础 上 添加 查询 功能 ,首先 在 该 文件 的 
去 table 之 标记 前 加 入 如 下 表单 代码 ,修改 后 的 页 面 (10-7. php) 如 图 10-30 所 示 。 





< fom method= "get" actionF= "10- 8.php"> 
<div style= "border:lpx solid gray; background:#eee;padding: dpx; "> 
查找 留言 : 请 输入 关键 字 < input name= "keyword" type= "text"> 
< select name= "sel"> 
< cption value= "title> 文 章 标题 < /option> 
< cption value= "contentw> 文 章 内容 < /cption> 
< /select> 
< input type= "sutmit" value=" 碍 询 吃 
< /div> < /fomm 


处 理 查询 的 程序 10-8. php 的 代码 如 下 : 


<h3 alignr "oenter"> 查 询 结 果 < /h3> 
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珊 址 加 中 http://1ocalhost/index. asp 


查找 留言 ， 请 输入 关键 字 『 文章 标题 辐 


标题 两 容 作者 enail 来 自 
陋 大 家 开心 腓 常 感谢 大 家 的 帮助 出 积 分 。 [xta@tom. com |202. 103. 56.6 


| 请 教 个 问题 ee 唐三彩 |renw@qq. con |127.0.0.1 















































-rr 一 上 下 
图 10-30 查询 记录 的 界面 
<? reqire('comn.php'); 
$keyword= trim($_GET['keyword"]); // 获 取 输 入 的 关键 字 
$sel=$_GET['sel']; // 获 取 选 择 的 查询 方式 
$sql= "select * fram 1yb"; 
if ($keyworck > "") 


$sql= $sql ." where $sel like '%$keywords '"; /构造 查询 语 扣 
$rs=mysql query($sql) or die(" 执 行 失败 '); 
if (mysql_ num rows($rs)>0) { 
echo <p 关键 字 为 “$keyword ”, 共 找到 ".mysql_mm rows ($rs) ." 条 留言 < /E> "; > 
< table border= "> 
< tr bgcolor= "#e0e0e0"> 
<th> 标 题 < /th><th width= "100"> 内 容 < /th><th width= "60"> 作 者 < /th> 
<th> email< /th><th width= "80"> 来 自 </th></tr> 
<? while($row=mysql fetdh assoc($rs)){ 
> 
<tr><td> < $row['title'] 2></to><tod>< $row['ontent'] P< /to> 
<to>< $row['author'] </to><to < $rowl'eail'] P</to> 
<to><e=$row['ip'] P</to>< /tr> 
< 
else ”echo "没有 搜索 到 任何 留言 "; > 
< /table> 


在 图 10-30 的 查询 框 中 输入 “大 家 ”, 则 该 程序 的 运行 结果 如 图 10-31 所 示 。 


查询 结果 


关键 字 为 “大 家 ”， 共 为 您 找到 3 条 留言 
标题 内 容 email 
宫 大 家 开心 诽 常 感谢 大 家 的 帮助 xta@tom. com |202. 103. 56.6 
大 家 好 ! 车 花 纷 飞 ffengf@163. com |59. 51. 2.2 
天 家 好 蚜 个 要 了 Fenef@163. con|34.44.4.4 ”| 副 
































图 10-31 ”10-8. php 的 运行 结果 
说 明 : 该 程序 可 根据 “标题 "或 内容” 进行 查询 ,只 要 在 下 拉 列 表 框 中 进行 选择 ,就 会 
将 文本 框 中 的 内 容 发 送 给 服务 器 ,作为 title 字段 或 content 字段 ,以 构造 相应 的 查询 
语句 。 
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10.5 分 页 显示 数据 


分 页 是 一 种 将 所 有 信息 分 段 显示 给 浏览 器 用 户 的 技术 。 用 户 每 次 看 到 的 不 是 全 部 信 
息 , 而 是 其 中 一 部 分 信息 ,如 果 用 户 没有 找到 自己 想 要 的 内 容 ,就 可 以 使 用 翻 页 链接 切换 
可 见 内 容 。 分 页 显示 功能 在 新 闻 列 表 页 .论坛 或 留言 板 等 程序 中 广泛 存在 。 当 记录 很 多 
时 ,程序 能 自动 将 结果 集 分 页 显示 ,用 户 可 以 一 页 一 页 地 浏览 。 例 如 在 图 10-32 中 ,结果 
集中 共有 14 条 记录 ,每 页 显示 4 条 ,这 样 就 分 成 了 4 页 。 





第 一 页 第 二 页 第 三 页 第 四 页 
第 1 条 第 5 条 | 一 一 第 9 条 第 13 条 
第 2 条 第 6 条 第 10 条 第 14 条 
第 3 条 第 7 条 第 11 条 
第 4 条 第 8 条 第 12 条 





























图 10-32 分 页 显示 记录 示意 图 


在 B/S 程序 中 ,分 页 技术 可 以 分 别 在 数据 库 服务 器 、Web 服务 器 或 浏览 器 中 实现 。 
如 果 通 过 创建 结果 集 的 方式 来 分 页 ,就 是 在 数据 库 服 务 器 上 实现 分 页 的 ;如 果 通 过 PHP 
循环 语句 读 取 结果 集中 某 页 范围 的 记录 ,就 是 在 Web 服务 器 上 实现 分 页 的 ;如 果 通 过 客 
户 端 JavaSeript 脚本 只 显示 某 页 记录 对 应 的 HTML 元 素 ,就 是 在 浏览 器 中 实现 的 分 页 。 
10.5.1 分 页 程序 的 基本 实现 


分 页 程序 实现 的 步骤 大 致 是 : 

中 设置 每 页 显示 的 记录 数 一 四 获取 记录 总 数 一 回 计算 总 共有 多 少 页 一 由 取得 要 显示 
第 几 页 的 记录 一 @@ 通 过 超 链 接 传递 页 码 。 

1, 设置 每 页 显示 的 记录 数量 


假定 使 用 变量 $ PageSize 来 保存 每 页 显示 的 记录 数 , 它 的 值 由 用 户 根据 需要 自行 设 
置 。 例 如 ,设置 每 页 显示 4 条 记录 ,可 以 使 用 下 面 的 语句 : 


$PageSize= 47 
2. 获取 结果 集中 的 记录 总 数 


获取 结果 集中 记录 总 数 有 两 种 方法 。 第 一 种 是 通过 mysql_num_rows() 函 数 返回 记 
录 总 数 , 并 将 其 保存 在 $ RecordCount 变量 中 。 代 码 如 下 : 


S$RecordCount—mysql_ num rows ($result); 
第 二 种 方法 是 通过 select 语句 中 的 count 函数 实现 。 代 码 如 下 : 


$result=mysql query ("Select count (* ) fram 1yo",$conn); /统计 记录 数量 的 结果 集 
$rowrmysql fetch row($result); 
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SRecoradcount= Srow[0]; 
3. 计算 总 页 数 


可 以 通过 $ RecordCount 和 $ PageSize 两 个 变量 的 值 计 算得 到 总 页 面 数 $ PageCount， 
方法 如 下 : 


$PageCount= ceil ($SRecordcount/S$SPageSize)7 


说 明 : ceil(x) 函 数 用 来 返回 大 于 或 等 于 x 并且 最 接近 x 的 整数 。 如 果 结 果 集中 的 记 
录 总 数 $ RecordCount 是 $ PageSize 的 整数 倍 , 则 $ PageCount 等 于 $ RecordCount 除 以 
$ PageSize 的 结果 ;和 否则, $ PageCount 等 于 $ RecordCount 除 以 $ PageSize 的 结果 取 整 
后 加 1。 


4. 如何 显 示 第 mn 页 的 记录 


虽然 使 用 $ PageSize 可 以 控制 每 页 显示 的 记录 数 ,但 是 要 显示 哪 页 的 记录 呢 ? 这 可 
以 在 Select 语句 中 使 用 limit 子 句 限定 显示 记录 的 范围 ,方法 如 下 : 


Select * from 表 名 limit 起 始 位 置 , 显示 记录 数量 

例如 ,用 $ Page 保存 当前 页 码 , 要 获取 第 $ Page 页 显示 的 记录 ,SQL 语句 如 下 : 
Select * from 表 名 limit ($Page- 1) * $PageSize,$PageSsize 

这 样 , 只 要 给 $ Page 赋 一 个 值 n, 就 能 显示 第 n 页 的 记录 了 。 代 码 如 下 : 


<? require('conmn.php'); 
$Page= 3; // 显 示 第 3 页 的 记录 
$PageSize= 4; 
$result=mysql_query ("Select x* from1yb",$coonn);  ”// 创 建 获取 记录 总 数 的 结果 集 
$Recordcount= mysql_ num rows ($result); 
$PageCount= ceil ($Recordoount/$ PageSize); 
$result=mysql_ query("Select * from 1yb limit ". ($Page- 1) * $PageSize.", ".$PageSize,$conn); ?> 
< table border= "1" width= "95%"> < tr bgoolor= "#e0e0e0"> 
<th> 标 题 < /th><th> 内 容 < /th><th> 作 者 < /th><th> email< /th><th> 来 自 < /th>< /tr> 
<? while($row=mysql fetch assoc($result)){ 2 
<tr><to><2=$rw['ID'] 2></to><to>< $row['omntent'] 2>< /td> 
<to>< $row['author'] P</to><to < $rowl'eail'] ></to> 
<to<$rw['ip'] P</too< /te> 
过 地 


mysql free result ($result); 2></table> 


说 明 : limit 子 句 中 的 记录 序号 从 0 开始 ,第 1 条 记录 的 序号 为 0。 因 此 ($ Page 一 1) 
%* $$ PageSize 就 表示 前 n 一 1 页 的 所 有 记录 再 加 1, 正好 是 第 n 页 的 第 1 条 记录 。 


5. 如 何 通过 超 链接 转 到 要 显示 的 分 页 
可 以 通过 超 链接 传递 参数 的 方法 通知 脚本 程序 要 显示 的 页 码 。 假 定 分 页 显示 记录 的 


@_W.. 准 网 页 设计 与 PHP 


页 面 是 10-9. php, 则 传递 参数 的 链接 如 下 : 





http://localhost/php/10- 9.Ehp?page= 2 


参数 page 用 来 指定 当前 的 页 码 。 在 10-9. php 中 ,可 以 通过 下 面 的 语句 读 取 参数 
page: 

if(isset($_GET['page'])) // 如 果 获 取 到 的 页 码 不 为 空 

$Page=$_GET['page']; 

else $Page= 1; 

这 样 $ Page 就 保存 了 URL 中 的 页 码 。 但 普通 用 户 不 会 知道 在 URL 上 输入 类 似 
?page 一 2 之 类 的 参数 来 访问 分 页 。 为 此 ,我们 可 以 定义 几 个 分 页 链接 ,供用 户 单 击 。 

“首页 “上 一 页 “下 一 页 ”“ 末 页 ”的 链接 的 代码 分 别 为 : 

echo "<a href= "page=1'> 首 页 < /a>"; // 转 到 当前 页 的 第 一 页 

echo "<ahref= '3page=" . ($Eage 1) . "> 上 一 页 </a>"; 

echo "<ahref= '3page=" . ($Paget 1) . "> 下 一 页 </a>"; 

echo "<ahref='?page=" .$PageCount . "'> 末 页 </a>" 

在 比较 完美 的 分 页 程序 中 ,还 需要 根据 当前 页 对 翻 页 链接 进行 判断 控制 。 如 果 当 前 
页 码 是 1, 则 取消 “第 一 页 "和 “上 一 页 ”的 链接 ;如 果 当 前 页 是 最 后 一 页 , 则 取消 * 下 一 页 ” 
和 “ 末 页 ”的 链接 。 

下 面 是 一 个 分 页 显示 程序 的 完整 代码 , 它 的 运行 效果 如 图 10-33 所 示 。 


<? require ('oom.php'); 


if(isset ($_GET['page']) && (int)$_ GET['page']> 0) // 获 取 页 码 并 检查 是 否 非法 
$Page=$_GET['page']; 

else  $Page-]; // 如 果 获 取 不 到 页 码 则 显示 第 1 页 

// 设 置 每 页 显示 记录 数 

$PageSize= 4; 

$result=mysql_ query ("select count (ID) fram 1yb", $conn); // 创 建 统计 记录 总 数 的 结果 集 


$row=mysql fetch row($result); 
SRecordcount= $row[0]; // 获 取 记 录 总 数 
// 计 算 总 共有 多 少 页 
$PageCount= ceil ($Recordcount/SEageSize)7 
// 将 某 一 页 的 记录 放 入 结果 集 
$result=—mysql qhery("Select * from 1yb limit ". ($Page 1) * $PageSize.", ".$PageSize,$conn); 
// 显 示 记 录 > 
<h3 align= "center"> 分 页 显示 记录 < /h3> 
< table border= "1" width= "95%"> 
< tr bgoolor= "#e0e0e0"> 
<th> 标 题 </th><th> 内 容 </th><th> 作 者 </th><th>email< /th><th> 来 自 </th>< /tr> 
<? vbhile($row=mysql_fetah assoc($result)){ 2 
<tr><tdp><2 关 Srow['title'] ></to><to><e= $row['omntent'] >< /to> 
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<to><e=$row['author'] P</to><to><e $row['amail'] >< /td> 
<tdp<2-S$Srow['ip'] P</to< /tr> 
<} 


mysql free result ($result); > 


< /table> 
<p><? // 显 示 分 页 链接 的 代码 
if($Page==1) // 如 果 是 第 1 页 , 则 不 显示 第 1 页 的 链接 


echo "第 一 页 上 一 页 "; 
else echo "<a href= '?page=1'> 第 一 页 < /a><a href= '?3page= "。 ($Page-])."> 上 一 页 </a>"; 


for($i= 1;$i<=$PageCount;$it+) { // 设 置 数字 页 码 的 链接 
if($i==$Page) echo "$i ™ // 如 果 是 某 页 , 则 不 显示 某 页 的 链接 
else echo "<a href= '?page= $i'> $i< /a> ";} 

if ($Page==$PageCount) // 设 置 “ 下 一 页 ”链接 


echo "下 一 页 末 页 "; 
else echo "<a href= '?page=" . ($Paget 1) . "> 下 一 页 </a> 
<a href= '?page=" .$PageCount . "> 末 页 < /a>"; 


echo " gribsp 共 ".$Recordcount. "条 记录 gnbsp"; // 共 多 少 条 记录 
echo "$Page /$PageCount 页 "; // 当 前 页 的 位 置 
p</ 


EE EDELELLI EI 








腕 大 家 开心 “ 排 常 感谢 大 家 的 帮助 关 积 分 。 [xta@tom. com |202. 103. 56.6 
请 教 个 问题 | 地 目录 中 的 文件 如 何 | 唐 三 





renw@qq. com |127.0.0.1 








这 是 测试 留言 i 王 承 芬 tang@163.COM |192. 168.0.1 
第 五 条 留言 ”在 古巴 比 伦 的 大 草原 上 队 志 yuxh@sohu. con |127. 0. 0. 1 
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图 10-33 分 页 显示 记录 示例 


6. 通过 移动 结果 集 指针 进行 分 页 (在 Web 服务 器 实现 分 页 ) 


分 页 程序 的 写法 其 实 还 有 别 的 办 法 。 例 如 ,要 实现 只 显示 第 n 页 的 记录 ,除了 使 用 
limit 子 句 创建 仅 含有 一 页 记录 的 结果 集 外 ,还 可 以 创建 包含 所 有 记录 的 结果 集 , 并 将 结 
果 集 的 指针 指向 第 n 页 的 第 1 条 记录 ,然后 用 for 循环 循环 输出 $ PageSize 条 记录 。 代 
码 如 下 : 


人 清单 10- 14:php 分 页 显示 记录 程序 2- 一 ~ 一 
<? require('conmn.php'); 
if(isset ($ GET['page']) && (int)$ GET['page'"]>0)  ”// 获 取 页 码 
S$Page=$_GET['page']; 
else S$Page= 1; 
// 设 置 每 页 显示 记录 数 
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S$PageSize= 4; 
$result=mysql_query ("Select ID rom 1yb",$comn);  ”// 创 建 结果 集 
SRecordcount= mysql_num rows ($result); // 获 取 记 录 总 数 
mysql_ free result ($result); 
// 计 算 有 多 少 页 
$PageCount= ceil ($RecordCount/$PageSize); 
// 将 所 有 记录 放 入 结果 集 
$result=mysql. qhery ("Select * fraom lyb",$corn); 
// 显 示 记 录 > 
< table border= "1" width= "95%"> < tr bgcolor= "#e0e0e0"> 
<th> 标 题 < /th><th> 内 容 < /th><th> 作 者 < /th><th>erail< /th><th> 来 自 < /th>< /tr> 
<? // 将 指针 指向 第 $page 页 第 1 条 记录 
mysql. data_seek ($result, ($Page- 1) * $PageSize); 
for($i= 0;$i< $PageSize;$i+ + ){ 
$row=mysql_ fetch assoc($result); 
if ($row) { // 如 果 记 录 不 为 空 ,用 来 处 理 末 页 的 情况 





> 
<tr><tdp<2 关 Srow['ID'] ></tdp><tdp<2 关 Srow['content'] >< /td> 
<td>< $row['author'] 2></to><to< $row['ermail'] 2>< /td> 
<to><e=$rw['ip'] P</to>< /tr> 


<?}} 
mysql free result($result); ?> 
< /table> 
<p><? 和 // 此 处 为 显示 分 页 链接 的 代码 ,与 10- 13.php 相 同 , 故 省 略 
</ 
其 中 ,mysql_data_seek(result,，row) 函 数 的 功能 是 将 结果 集 result 的 指针 移动 到 指 
定 的 行 数 row( 行 数 从 0 开始 ) 。 


这 种 方法 创建 的 结果 集中 包含 了 所 有 记录 ,也 就 是 说 ,包含 了 所 有 页 的 记录 。 从 效率 
上 说 ,如 果 结 果 集 中 记录 很 多 的 话 , 该 方法 创建 的 结果 集 将 占用 很 多 的 服务 器 内 存 ,因此 
效率 较 低 。 但 如 果 结 果 集 中 记录 比较 少 , 则 这 种 方法 不 必 每 显示 一 个 分 页 就 执行 一 个 不 
同 的 查询 ,因此 效率 反而 高 些 。 


10.5.2 ”对 查询 结果 进行 分 页 


10. 3.1 节 中 给 出 的 只 是 最 基本 的 分 页 程序 。 假 设 要 对 图 10-31 中 搜索 留言 得 到 的 
结果 进行 分 页 , 则 上 述 分 页 程序 只 能 正确 显示 第 1 页 , 当 用 户 转 到 其 他 页 后 又 会 显示 所 有 
的 记录 ,而 不 是 查询 得 到 的 记录 。 这 是 因为 单 击 分 页 链接 后 没有 将 用 户 输入 的 查询 关键 
字 传 递 给 其 他 页 。 

为 此 ,可 以 在 获取 了 用 户 输入 的 关键 字 后 ,一 方面 将 它 传递 给 SQL 语句 进行 查询 ; 另 
一 方面 将 其 保存 在 分 页 链接 的 URL 参数 (或 表单 隐藏 域 ) 中 。 具 体 来 说 ,可 以 给 分 页 链 
接 增 加 一 个 URL 参数 ,将 该 URL 参数 的 值 设置 为 查询 关键 字 以 传递 给 其 他 页 。 关 键 代 
码 如 下 : 
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<% $keyword trim($ GET['keyword']); // 获 取 查 询 关 键 字 
if($keyword< > "™") 
$sql= $sql ." where title like '%$keywords '"; 


for ($i=1;$i<=$PageCount;$i+t+) { // 设 置 每 页 的 链接 
if($i==$Page) echo "$i "; 
else // 在 此 处 添加 URL 参 数 Jeyword, 用 来 保存 关键 字 


echo "< a href= '3page= $igkeyword= $keyword'> $i< /a> ";} > 


这 样 , 单 击 分 页 链接 时 ,都 会 将 关键 字 重 新 传 给 SQL 语句 ,因此 单 击 分 页 链接 后 转 到 
的 新 分 页 仍然 是 查询 结果 。 它 的 完整 代码 如 下 ,运行 结果 如 图 10-34 所 示 。 


<? require('comn.php'); 


if(isset($ GET['page']) && (int)$ GET['page']> 0) // 获 取 页 码 

$Page= $_GET['page']; 
else $Page= 1; 
$PageSize= 4; // 设 置 每 页 显示 记录 数 
$keyword= trim($_GET['keyword']); // 获 取 查 询 关 键 字 
$sql= "select * fram lybo"; 
证 (keyword< > ™") 

$sql= $sql ." where title like '%$keywords "; 
$result=mysql._ query ($sql, $conn); // 根 据 有 无 查询 关键 字 创建 结果 集 
SRecordcount= mysql_num rows ($result); // 获 得 记录 总 数 
$PageCount= ceil ($RecordCount/$PageSize); // 获 得 总 页 数 
> 


< form method= "get" actior= ""> 
< div style= "border:lpx solid gray; background:#eee;padding: rx;"> 
查找 留言 : 请 输入 关键 字 < input nare= "keyword" type= "text" value= "< 关 $keyword?> "> 

< input type= "sutmit" value= " 夺 询 吃 
< /div>< /fom> 
< table border= "1" width= "95%"> 

<tr bgcolor= "#e0e0e0">< th> 标 题 < /th>…( 省 略 显示 表 头 的 代码 )< /tr> 
过 家 
mysql data seek ($result, ($Page- 1) * $PageSize); // 将 指针 指向 第 $Page 页 第 1 条 记录 
for ($i= 0;$i< $PageSize;$i++){ 

$row=mysql fetdh assoc ($result); 
if ($row) { > 
<tr><to><= $row['title'] 2></to><to>< $row['content'] 2>< /td> 
<td><=$row['author'] ></to><to><e $row['eamail'] ></to> 
<tdp<2 关 Srow['ip'] >< /to< /tr> 

<?2}> 
< /table> 
<E><? // 显 示 分 页 链接 

if($Page==1) ”echo " 叫 一 页 上 一 页 交 

else echo "<ahref= "zpage- 1gkeyword- $keyword'> 第 一 页 < /a> 
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<ahref= '?page=" . ($Page- 1) . "gkeyword- $keyword'> 上 一 页 < /a>"; 
for ($i=1;$i<=$PageCount;$it+) { // 设 置 数 字 页 码 的 链接 
if($i==$Page) echo "$i ™; 
else echo "<a href= '?page— $igkeyword= $keyword'> $i< /a> ";} 
if($Page==$PageCount) edho "下 一 页 末 页 "; 
else echo "<ahref='2page=" . ($Paget1) . "gkeyword= $keyword'> 下 一 页 < /a> 
<a href= '?page= " .$PageCount . "gkeyword= $keyword'> 末 页 < /a> "; 
echo " snbsp 共 ".$Recordcount. "条 记录 gnbsp"; // 共 多 少 条 记录 
echo "$Page /$PageCount 页 "; // 当 前 页 的 位 置 
2>< 人 > 





习 http://lecalhost/php/8/erample/8. 175-12. php?page=1akeywaea 二 河 [=] 玉 4 


文件 四 ”编辑 EE) 查看 WW 收 帘 内。 工具 中 帮助 Ed 
地 址 @) 图 http://1ocalhost/php/8/example/8. 1/5-12. php?page=1&keyword= 大 家 司 


查找 留言 请 输入 关键 字 区 一 洁 寺 URL 参数 传送 
关键 字 给 各 分 页 
丙 容 作者 email 来 自 


江村 舒 二 唐三彩 |sanyo@tom. com|59. 51. 24. 37 























id 胡 积 分 |xta@tom. com ||202.103. 56.6 


雪花 纷飞 荔 芥 [fengf@163. com|59. 51.2.2 
下 雪 了 劳 芬 [fengfe@163. com|34. 44. 4. 4 
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图 10-34 对 查询 结果 进行 分 页 的 效果 


10.5.3 可 设置 每 页 显示 记录 数 的 分 页 程序 


在 有 些 分 页 程序 中 ,还 具有 让 用 户 选 择 每 页 显示 多 少 条 记录 的 功能 ,如 图 10-35 所 
示 。 对 于 记录 数 非常 多 的 网 页 来 说 ,这 种 功能 对 用 户 来 说 更 友好 。 


司 http://localhest/php/8/example/8- 175-14. php?PaEe=I = 有 CE 


文件 人 编辑 EE) 查看 GD) 收藏 人 工具 CD) 帮助 0 
里 奸 @@ 贸 http: //1ocalhost/php/8/exanple/8. 1/5-14. php?paee=1 


自 定义 每 页 记录 数 的 分 页 程序 


内 容 | 作者 | email 
硬 常 感谢 大 家 长 期 以 来 的 帮助 唐三彩 |sanyo8@tom. com 
厅 人 今天 到 下 一 洲 [条 可 enoBaQ com | 
| 虚拟 目录 中 的 文件 如 何 浏览 “| 李 博 士 |tdkd8163. com 和 
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图 10-35 可 设置 每 页 显示 多 少 条 记录 的 分 页 程序 


要 实现 该 功能 ,首先 在 网 页 中 添加 一 个 表单 ,表单 的 文本 框 中 可 输入 每 页 显示 的 记录 
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数 。 如 果 用 户 提 交 了 表单 ,就 把 用 户 设置 的 每 页 记录 数 赋 给 $ PageSize 变量 ,这 样 分 页 程 
序 就 会 根据 新 的 $ PageSize 值 重新 分 页 。 但 转 到 其 他 页 后 ,由 于 获取 不 到 用 户 设置 的 记 
录 数 , $ PageSize 的 值 又 会 恢复 成 默认 值 。 为 此 ,应 该 把 用 户 设置 的 记录 数 保存 起 来 ,可 
以 采用 10. 5.2 节 介 绍 的 方法 将 该 值 保存 到 URL 参数 中 ,也 可 以 将 该 值 保存 到 一 个 
session 变量 中 ,这 样 其 他 分 页 都 能 获取 到 用 户 设 置 的 记录 数 。 本 例 采 用 第 二 种 方法 , 代 
码 如 下 ,运行 效果 如 图 10-35 所 示 。 


<? session start(); 
require('oonmn.php'); 
if(lisset ($_ GET['page']) && (int)$ GET['page']> 0) // 获 取 页 码 
$Page=$_GET['page']; 
else $Page= 1; 
1/ 设置 每 页 显示 记录 数 , 并 将 记录 数 保存 到 session 变 量 中 
if(isset ($ GET['pagesize'])){ // 如 果 用 户 设置 了 每 页 记录 数 
$PageSize=$_GET['pagesize']; // 将 用 户 设置 的 值 赋 给 $Pagesize 
$_SESSION["pagezize"]=$_GET['pagesize']; ”// 将 该 值 保存 到 session 变 量 中 
} 
if($_SESSION["pagezize"]<>"™") // 如 果 sgssIoN 值 不 为 空 
$PageSize=$_SESSION["pagezize"]; 
else 
$PageSize= 4; // 第 一 次 打开 网 页 时 默认 每 页 显示 4 条 
$result=mysql_query ("Select * from 1yb",$conn);  ”// 创 建 结果 集 
$RecordCount= mysql_ num rows ($result); 
$ PageCount= ceil ($Recordcount/$Pagesize); // 计 算 有 多 少 页 
// 显 示 记 录 S 
<h3 align= "center"> 自 定义 每 页 记录 数 的 分 页 程序 < /h3> 
< form style= "margin:0 auto; text- align:center;" method= "get" action= ""> 每 页 显示 < input type=" 
text" name= "pagesize" size= "3" value= "< 2=$PageSize?> > 条 < input type= "sutmit"” value= "保存 性 < 
/fom> 
< table border= "1" width= "95%"> 
< tr bgcolor= "#e0e0e0"> 
<th> 标 题 < /th><th> 内 容 < /th><th> 作 者 < /th><th>email< /th><th> 来 自 < /th> 
< /tr> 
<? 
mysql data seek($result, ($Page- 1) * $PageSize); // 将 指针 指 到 某 页 的 第 1 条 记录 
for($i=0;$i< $PageSize;$i+ +){ 
$row=mysql fetch assoc ($result); 
if ($row) { > 
<tr><tdp<2 关 Srow['ID']72></td<tdp<2 关 Srow['content']72>< /to> 
<to><e $row['author'];2>< /to <to< $row['eanil']; > < /td> 
<td>< $row['ip'];2 < /to> 
</tr> 


滩 区 才 寺 
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mysql free result ($result); 2> 

< /table> 

<E><? … // 此 处 为 显示 分 页 链接 的 代码 ,与 10- 13-Emp 相 同 , 故 省 略 
2P<A> 





10.6 _ mysqli 扩展 函数 的 使 用 


从 PHP 5.0 开始 ,不 仅 可 以 使 用 原来 的 mysql 函数 ,而 且 还 可 以 使 用 新 的 mysqli 扩 
展 函数 实现 与 MySQL 数据 库 的 信息 交流 。mysqli 被 封装 到 一 个 类 中 , 它 是 一 种 面向 对 
象 的 技术 ,其 中 i 表示 改进 (improvement) ,其 执行 速度 更 快 。 大 多 数 mysqli 函数 的 函数 
名 与 mysql 函数 名 类 似 , 只 不 过 将 函数 名 的 前 级 由 “mysql” 改 成 了 “mysqli”。 

要 在 PHP 中 使 用 mysqli 函数 ,需要 在 php. ini 中 进行 配置 。 找 到 下 面 的 配置 项 ， 


jextension= php mrysqli.dl1 
去 掉 前 面 的 注释 符 (; ) ,保存 更 改 ,重启 Apache 服务 ,就 可 以 使 用 mysqli 函数 了 。 
10.6.1 连接 MySQL 数据 库 

在 mysqli 中 ,提供 了 两 种 方法 创建 到 数据 库 的 连接 。 

1. 使 用 mysqli_connect() 函数 

mysqli_connect() 函 数 用 来 连接 MySQL 数据 库 , 语 法 如 下 : 

mysqli 对 象 名 =mysqli_connect 数据 库 服务 器 ,用户 名 ,密码 ,数据库 名 ) 

例如 ,要 访问 本 机 上 的 guestbook 数据 库 , 用 户 名 为 root, 密 码 为 111。 代 码 如 下 : 

$conn= mysqli connect ('localhost', "root' '111", "guestbook')7 


可 见 ,mysqli_connect 函数 比 mysql_connect 多 了 一 个 参数 ,使 它 在 连接 数据 库 服务 
器 的 同时 还 能 选择 数据 库 。 


2. 声明 mysqli 对 象 
可 以 使 用 声明 mysqli 对 象 的 方法 来 创建 连接 对 象 ,方法 如 下 : 
S$connF new mysqli ("localhost' "root' "111", "guestbook')7 


如 果 在 创建 mysqli 对 象 时 没有 向 构造 方法 传人 参数 , 则 需要 多 写 几 行 代码 ,包括 调 
用 connect 函数 连接 数据 库 服务 器 ,使 用 select_db 方法 选择 数据 库 。 代 码 如 下 : 


S$connr new mysqli (); 
$oonn- > oonnect ('localhost", 'root", '111"); 





S$conn- > select_db('guestibook'); 


说 明 : 
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(1) new mysqli( ) 表 示 新 建 一 个 mysqli 类 的 实例 ,类 的 实例 即 对 象 , 赋 给 变量 


$ conn 。 


(2) 由 于 $ conn 是 一 个 对 象 ,调用 对 象 的 方法 可 以 使 用 “对 象 名 -二 方法 名 ”的 形式 。 
(3) mysqli 扩展 模块 包括 mysqli、mysqli_result 和 mysqli_stmt 三 个 类 。$ conn 就 
是 一 个 mysqli 对 象 , 它 属 于 mysqli 类 。mysqli 类 常见 的 成 员 方法 如 表 10-1 所 示 。 


表 10-1 mysqli 类 中 的 成 员 方法 

















方 法 名 功 能 
connect() 打开 一 个 新 的 连接 到 MySQL 数据 库 服 务 器 
select_db() 选择 当前 数据 库 
set_charset() 设置 客户 端的 默认 字符 集 
close() 关闭 先前 打开 的 连接 
query() 执行 SQL 语句 ,并 返回 结果 集 ( 对 于 Select 语句 ) 或 不 返回 





multi_query() 


同时 执行 多 个 查询 语句 





store_result() 


在 执行 多 查询 语句 时 ,获取 当前 结果 集 





next_result() 


在 执行 多 查询 语句 时 ,获取 当前 结果 集 的 下 一 个 结果 集 





more_results() 





从 多 查询 语句 中 检查 是 否 有 任何 更 多 的 查询 结果 集 


使 用 这 些 成 员 方 法 可 以 对 数据 库 进行 查询 .创建 结果 集 等 操作 。 
10.6.2 执行 SQL 语句 创建 结果 集 


mysqli_query() 函数 或 mysqli 对 象 的 query() 函数 都 可 用 来 执行 SQL 语句 ,如 果 执 
行 的 是 Select 语句 , 则 会 返回 一 个 结果 集 ; 如果 执行 的 是 insert delete 等 非 查 询 语句 , 则 


不 会 返回 结果 集 。 





(1) mysqli_query() 的 语法 如 下 : 


结果 集 =mysqli_query (连接 对 象 , SQL 语句 ) 
可 见 ,mysqli_query() 两 个 参数 的 顺序 与 mysql_query() 的 参数 顺序 相反 。 例 如 : 


$result=mysqli query ($conn, 'select * fraom 1yb'); 


(2) mysqli 对 象 的 query() 函数 的 基本 语法 和 示例 如 下 : 


对 象 名 ->query(sQL 语 句 ) 


$result= $conn- > auery('select * from 1yb'); 


结果 集中 的 所 有 数据 默认 是 都 发 送 到 客户 端的 ,如 果 和 希望 把 结果 集 暂 存在 MySQL 
服务 器 上 ,在 有 需要 时 才 一 条 条 地 读 取 记录 过 来 ,就 需要 在 调用 query 方法 时 ,使 用 它 的 
第 二 个 参数 ,并 提供 一 个 MYSQLI_USE_RESULT 值 。 例 如 : 


$result= $conn- > query ('select * fram 1yb', MYSQLIT USE RESULT); 
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在 结果 集 比 较 大 或 不 适合 一 次 全 部 取 回 到 客户 端 时 ,使 用 这 个 参数 比较 有 用 。 

(3) 执行 非 查询 语句 。 

如 果 执 行 的 是 非 查询 语句 , 则 不 会 返回 结果 集 , 因 此 不 要 将 函数 的 返回 值 赋 给 
$result。 例 如 : 





$conn- > query ('delete fram 1yb where ID= 3'); 


10.6.3 从 结果 集中 获取 数据 


结果 集 实 际 上 是 mysqli_result 类 的 一 个 对 象 ,可 以 使 用 mysqli_result 类 中 的 一 些 方 
法 获取 结果 集中 的 数据 。 如 果 要 获取 结果 集中 的 当前 记录 并 存储 到 数组 ,可 使 用 如 下 


代码 : 
$row $result— > fetch assoc(); 
这 样 就 将 指针 指向 的 当前 记录 保存 到 数组 $row 中 ,并 使 结果 集 指针 指向 下 一 条 
记录 。 
下 面 的 例子 从 结果 集中 获取 所 有 记录 ,并 输出 到 表格 中 ,运行 效果 如 图 10-20 所 示 。 
-------------------- 清单 10- 17.php ---------------- 


<? $Sconn= new mysqli (7 
$conn- > connect ('localhost' 'root', '1117)7 


S$conn- > select_ db ('guestibook'); // 连 接 数 据 库 

$comn- > query ('set names go2312"); // 设 置 字符 集 

$result=$conn- > query('select * from 1yb'); ”// 创 建 结果 集 
YT 
< table border= "1" width= "95%"> 

<tr bgcolor= "#e0e0e0"> 

<th> 标 题 < /th><th width= "100"> 内 容 < /th><th width="60"> 作 者 < /th> 

<th> email< /th> < /tr> 

<? $result->data seek(5); // 从 第 6 条 记录 开始 读 , 可 去 掉 

while ($row= $result- > fetch assoc()){ // 循 环 读 取 结果 集中 的 记录 
> 


<tr><tod><=$rw['title'] 2</to> <to < $row['ontent’] P< /to> 
<td>< 2 六 S$row['author'] 2></to><to>< $row['eamail'] >< /td>< /tr> 
过 全 下 
< /table> 
< 户 记 录 总 数 < $result->nm rows >< /p> 
上 例 中 num_rows 是 mysqli_result 类 中 的 一 个 成 员 属性 ,用 来 返回 结果 集中 的 记录 
总 数 。 而 fetch_assoc() 是 mysqli_result 类 中 的 一 个 成 员 方法 ,mysqli_result 类 中 常用 方 
法 如 表 10-2 所 示 。 
表 10-2 mysqli_result 类 中 的 成 员 方法 


方 法 名 功 能 
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fetch_row() 以 索引 数组 的 形式 返回 结果 集中 当前 指向 的 记录 
fetch_assoc() 以 关联 数组 的 形式 返回 结果 集中 当前 指向 的 记录 
fetch_array() 以 索引 数组 和 关联 数组 的 形式 返回 结果 集中 当前 指向 的 记录 
fetch_object() 以 对 象 的 形式 返回 结果 集中 当前 指向 的 记录 

data_seek(n) 将 结果 集 指 针 指 向 第 n 条 记录 

fetch field() 从 结果 集中 获得 某 一 字段 的 信息 

fetch_fields() 从 结果 集中 获得 全 部 字段 的 信息 

field_seek() 设置 结果 集中 字段 的 偏 移 位 置 

close() 关闭 结果 集 





提示 : 如 果 要 判断 结果 集 不 为 空 ,只 能 使 用 if($result- 二 num_rows 二 0) 来 判断 ,而 
不 能 使 用 ii($result) 来 判断 ,因为 $conn- 二 query() 只 有 在 执行 查询 出 错时 才 会 返回 
false; 如 果 执行 查询 正确 ,即使 查询 结果 只 有 0 条 记录 ,也 会 返回 一 个 成 员 为 0 的 对 象 。 


10.7 用 mysqli 制作 新 闻 网 站 


本 节 将 把 如 图 10-36 所 示 的 一 个 静态 网 页 转化 为 动态 网 站 ,也 就 是 向 静态 网 页 中 绑 
定数 据 。 由 于 制作 一 个 完整 的 动态 网 站 要 经 过 数据 库 设 计 、 制 作 前 台 页 面 、 制 作 后 台 管 理 
程序 等 步骤 ,工作 量 相当 大 。 因 此 在 实际 中 ,我 们 一 般 是 借用 别人 的 数据 库 和 后 台 管理 程 
序 ,用 于 添加 、 删 除 和 修改 网 站 中 的 新 闻 内 容 , 这 样 的 后 台 管理 系统 称 为 CMS( 内 容 管理 
系统 ) 或 新 闻 管 理 系统 。 自 己 只 制作 前 台 页 面 (主要 包括 首页 、 栏 目 首页 和 内 页 三 个 页 
面 ) ,然后 在 这 些 页 面 中 绑 定 动态 数据 ( 即 显示 数据 库 中 的 有 关 数 据 ) 。 


10.7.1 为 网 站 引用 后 台 程 序 和 数据 库 


这 里 以 风 诺 新 闻 系 统 为 例 , 介 绍 在 制作 网 站 时 如 何 利用 它 的 数据 库 和 后 台 程 序 。 首 
先 在 百度 上 搜索 “ 风 诺 新 闻 系 统 ”, 下 载 下 来 后 将 其 所 有 文件 解压 到 一 个 目录 内 ,如 E:\ 
Web, 设 置 E;\Web 为 该 新 闻 系 统 的 网 站 主 目 录 ( 该 目录 下 有 admin 目录 和 data 目录 )， 
如 图 10-37 所 示 。 

该 网 站 的 数据 库 文件 为 data 子 目 录 下 的 funonews. mdb。 我 们 使 用 Navicat for 
MySQL 软件 将 该 Access 数据 库 转 换 为 MySQL 数据 库 ( 具 体 转换 方法 见 10. 1.4 节 中 )， 
数据 库 名 为 test。 

下 面 打开 数据 库 test, 可 发 现 该 数据 库 中 共有 4 个 表 , 分 别 是 Admin、Bigclass、News 
和 SmallClass, 其 中 News 表 存 放 了 网 站 中 的 全 部 新 闻 ,News 表 中 字段 及 含义 如 表 10-3 
所 示 。 





表 10-3 News 表 中 的 字段 及 含义 
字 段 名 字段 含义 数据 类 型 
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将 被 蔡 换 成 动态 内 容 


rs("title"), 并 将 该 行 循 


这 是 第 一 条 新 闻 用 来 测试 
此 处 显示 图 片 轮 显 框 
环 输出 得 到 多 条 新 闻 


这 是 第 一 条 新 闻 用 来 测试 这 是 第 一 条 新 闻 用 来 测试 这 
Tre 到 本 TD 
和 "title"), 并 将 该 行 循 将 被 蔡 换 成 动态 内 容 rs("title") 
环 输出 得 到 多 条 新 闻 并 将 该 行 循环 输出 


图 10-36 新 闻 网 站 的 静态 首页 






























文件 中 ”编辑 E) 查看 WW) 收 豪 AW) 工具 ) 帮助 ”以 


焉 十 加 | £:\web 司 加 3 








uppie bottom asp comasp ~ css.css default. asp 
te 全 ee 


图 10-37 风 诺 新 闻 系 统 网 站 主 目录 下 的 内 容 




















ID 新 闻 的 编号 int ,自动 递 增 ,主键 
title 新 闻 标 题 varchar 
content 新 闻 内 容 TEXT 
BigClassName 新 闻 所 属 的 大 类 名 varchar 
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续 表 
字 段 名 字段 含义 数据 类 型 
SmallClassName 新 闻 所 属 的 小 类 名 (可 不 指定 ) varchar 
imagenum 该 条 新 闻 中 含 的 图 片 数 int 
firstImageName 新 闻 中 第 一 张 图 片 的 文件 名 varchar 
user 新 闻 发 布 者 varchar 
infotime 新 闻 的 发 布 日 期 datetime 
hits 该 条 新 闻 的 点 击 次 数 int 
证 是 否 将 该 新 闻 作为 图 片 新 闻 显 de 
示 ( 该 新 闻 中 必须 含有 图 片 ) 








说 明 : 新 闻 系 统 中 的 所 有 新 闻 是 按 栏目 分 类 的 。 因 此 每 条 新 闻 中 必须 有 一 个 
BigClassName 字段 ,以 标注 该 新 闻 属于 哪个 栏目 。 一 个 新 闻 网 站 的 结构 及 其 对 应 页 面 如 
图 10-38 所 示 。 











































































































新 闻 网 站 首页 
人 ni i) 
1 目 目 目 | 一 一 一 (栏目 首页 
1 1 2 7 | 1 
__ 上 = 村 ES 罗 
下 
1 | 新 新 新 新 新 新 | ! sy 
1 | 闻 | | 闻 闻 闻 | 闻 闻 | 二 一 一 新 闻 页 
1 2 3 4 2| 13| | 
图 10-38 新 闻 网 站 的 结构 及 其 对 应 页 面 
网 站 目录 下 的 其 他 文件 是 用 该 CMS 制作 的 一 个 示例 网 站 ,其 中 default. php 为 该 网 


站 的 首页 ,otype. php 为 该 网 站 的 栏目 首页 ,funonews. php 为 该 网 站 的 内 页 。css. css 为 
该 网 站 的 样式 表 文 件 。top. php、bottom. php 和 left. php 为 该 网 站 各 页 面 调用 的 头 部 、 尾 
部 和 左 侧 文件 。 我 们 可 以 将 这 些 文件 都 删除 ,只 保留 admin 子 目录 (后 台 管 理 系统 所 在 
目录 ) 。 

接 下 来 ,进入 风 诺 新 闻 系 统 的 后 台 创建 我 们 网 站 的 栏目 ,并 在 每 个 栏目 中 添加 几 条 新 
闻 。 后 台 登 录 的 网 址 是 http://localhost/admin/adminlogin. php ,使 用 默认 用 户 名 funo 
和 密码 funo 即 可 登录 进入 如 图 10-39 所 示 的 新 闻 后 台 管 理 界 面 。 

在 这 里 ,首先 选择 “管理 新 闻 类 别 ” 创 建 网 站 应 具有 的 栏目 ,如 “通知 公告 "“ 系 部 动 
态 ”“ 学 生 园 地 ”等 ,还 可 以 在 这 些 栏目 下 青 选择 “添加 二 级 分 类 ”来 创建 小 栏目 。 将 网 站 
栏目 创建 好 之 后 ,就 可 以 选择 左 侧 的 “添加 新 闻 内 容 ” 为 每 个 栏目 添加 几 条 测试 新 闻 , 只 要 
在 添加 新 闻 时 将 这 些 新 闻 的 “新 闻 类 别 ” 选 择 为 不 同 的 栏目 即 可 。 这 样 这 些 新 闻 就 保存 到 
news 表 中 。 


@_W. 准 网 页 设计 与 PHP 























图 10-39 网 站 后 台 管 理 界面 


10.7.2 在 首页 显示 数据 表 中 的 新 闻 


为 了 在 网 页 上 显示 数据 库 中 的 新 闻 , 必 须 先 要 连接 数据 库 , 本 系统 采用 mysqli 函数 
连接 数据 库 , 将 连接 数据 库 的 代码 写 在 conn. php 中 ,以 供 其 他 页 面 调用 。 代 码 如 下 : 


<? $coonn= new mysqli (); 

S$conn- > connect ('localhost", 'root', "111"); 

$conn- > select db('test'); 

$conn- > query ('set names gb2312'); > 

在 首页 的 各 个 栏目 中 显示 这 个 栏目 的 新 闻 是 通过 显示 结果 集中 记录 实现 的 。 比 如 ， 
要 显示 “通知 公告 "栏目 中 的 最 新 6 条 新 闻 , 可 以 执行 下 面 的 查询 来 创建 结果 集 。 


$result= $conn- > query ("select * from news where Bigclassname= ' 通 知 公 告 ' order by ID desc limit 6"); 


接 下 来 就 可 以 循环 输出 该 结果 集中 的 6 条 新 闻 到 页 面 。 而 要 显示 “学 生 工 作 ” 栏 目的 
新 闻 , 就 必须 执行 一 个 不 同 的 查询 ,因此 需要 一 个 新 的 结果 集 来 实现 。 为 了 得 到 一 个 新 结 
果 集 ,有 两 种 方法 : 一 种 是 创建 一 个 新 的 结果 集 对 象 如 $ result2; 另 一 种 方法 是 将 原来 的 
结果 集 关 闭 ,再 用 原来 的 结果 集 对 象 $ result 打开 一 个 新 结果 集 。 例 如 : 

<? $result->close(); /人 关闭 语句 也 可 省 略 ,mysqi 函数 会 自动 关闭 

$result= $conn- > query("select * from news where Bigclassname= "学 生 工 作 ' order by ID desc limit 6"); 

> 

使 用 第 二 种 方法 内 存 中 只 需 保存 一 个 结果 集 对 象 ,更 节约 资源 ,因此 推荐 使 用 。 那 么 
在 首页 显示 新 闻 的 过 程 是 : 

(1) 为 第 一 个 栏目 创建 结果 集 , 然 后 循环 输出 结果 集中 记录 到 该 栏目 框 中 ; 

(2) 为 第 二 个 栏目 创建 结果 集 , 再 循环 输出 记录 到 第 二 个 栏目 框 , 如 此 循环 。 

因此 ,首页 上 有 几 个 栏目 就 创建 几 个 结果 集 ,代码 如 下 ,运行 结果 如 图 10-40 所 示 。 


<div id "main'> 
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<div id- "pic™> 
<? require('conn-bhp)7 
incluge ('flasha.php'); //fLasha.php 用 来 载 和 图片 轮 显 框 ,具体 代码 见 10.7.3 节 
P</div> 
<div id "xbdt"> 
<h2 class= "lamu"> <a href= "otype.php?owenl= 近 期 工作 ">< /> 系 部 动态 < /h2> 
<? 
$result= $conn- > query ("select x* fram news where bigclassname in('" 规 章 制度 ',' 学 生 工 作 ',' 德 育 园 
地 ',' 笠 研 成 果 ',' 近 期 工作 ',' 图 片 新 闻 ') order by ID desc limit 7 "); 
$row $result— > fetch assoc(); > 
< 上 -将 最 新 的 一 条 新 闻 以 3 标题 的 形式 突出 显示 在 系 部 动态 栏目 上 方 --> 
<h3 align= "oenter">< = Trimtit ($row['title'],12) ?>< /h3> 
<E><a href= "onews.php?id=< = $row['ID']2> "> 
< Trimtit (strip tags ($row['content']),40) 2>< /a> [< = noyear ($row 
["infotime']) ?> )]< /p> 
<ul> <? // 显 示 系 部 动态 栏目 框 中 的 6 条 新 闻 
for($i=0;$i<6;$i++) { 
Srowr= $result- > fetch assoc();?> 
<1i class= "xinwen"> <b style= "float:right;"> < =noyear ($row['infotime'])?> 
</> 
<a href= "onews.FHhp?id< = $row['D'] > >< ETrintit ($row['title'],20) > < /a> 
</1i> 
<?} 
$result- > close(); 
$result= $conn- > query ("select  * fram news where Bigclassname= "近期 工作 ' order by ID desc 
limit 6"); // 为 通知 公告 栏目 创建 结果 集 ”> 
< /ub> < /div> 
<div id "tzgg"> 
<h2 class= "lammu"> <a href= "otype.php?owenl= 近 期 工作 ">< /> 通知 公告 < /h2> 
<ul><? 
for($i=0;$i<6;$i++) { 
$row= $result- > fetch assoc(); > 
<1i class= "xirwen"> <b style= "float:right;">< noyear ($row['infotime'])?>< /b> 
<a href= "cnews.fhp?id=< = $row['D'] > "< Etrintit ($row['title'],20) >< /a> 
</ii> 
区 时} 
$result- > close(); 
$result= $conn- > query ("select  * fram news where Bigclassname= ' 学 生 工 作 ' order by ID desc 
limit 6"); // 为 学 生 工作 栏目 创建 结果 集 > 
</u>< /div> 
<div id "xsyd"™> 
<h2 class= "lamu"> <a href- "otype.php?owenl= 学 生 工 作 ">< /> 学 生 工作 < /hb2> 
<u><? 
for($i=0;$i< 67Si++) { 








$row $result— > fetch assoc();?> 
<1i class= "xirwen"> <b style= "float:right;"> < =noyear ($row['infotime'])?> < /b> 
<a href= "onews.php?id=< = $row['ID']2> "> < trimtit ($row['title'],20)?> 
</az</li> 
<?]} 
$result-— > close(); 
$result= $conn- > query ("select * ”from NEWS where firstImageName< > '' order by ID DESC limit 7"); 
/为 图 片 滚动 栏目 创建 结果 集 可 
</u>< /div> 
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人 文 社会 科学 系 年 度 考核 实 … 


一 、 总 则 1、 为 确立 本 系 教学 工作 的 中 心地 位 ， 强 
化 教师 才学 工作 职责 和 质量 意识 ， 突出 孝 
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图 10-40 ”新闻 版 块 最 终 效果 图 














将 图 10-40 与 图 10-36 相 比 ,可 看 出 图 10-36 中 显示 静态 文字 的 地 方 被 替换 成 了 输出 
动态 数据 ,这 称 为 绑 定 数据 到 页 面 。 由 于 每 条 新 闻 位 于 一 个 <<1i 标 记 内 ,因此 循环 输出 
新 闻 的 循环 体 是 li 这 …</li 一 。 

上 述 代码 中 还 调用 了 3 个 函数 , 即 裁剪 字符 串 长 度 的 Trimtit() 函 数 ( 见 8. 2.2 节 例 
8.5) 去 除 HTML 标记 的 PHP 内置 函数 strip_tags() 和 去 除 日 期 前 年 份 的 函数 noyear 
(str) ,代码 如 下 : 


<? finction noyear($str) { 
retumn substr ($str,5,5); 
3. 


为 了 使 本 网 站 中 所 有 网 页 都 能 调用 这 些 函 数 ,应 将 这 些 函 数 代码 写 在 conn. php 文 
性 踢 。 

上 述 代 码 调 用 的 CSS 代码 如 下 ,主要 是 设置 4 个 栏目 框 浮动 和 设置 标题 栏 背景 
图 片 。 














< style type= "text/css"> 
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#picr#Hzbadtv#tzggr#xsyd { /* 4 个 栏目 框 * / 
border:1px solid #QCc66007 
background:white; 
width:335px; 
padding:2px rx 10px; 
margin: x; 
float:left; /* 使 4 个 栏目 框 都 浮动 * /} 
#mrain { 
background:#eBeadd; 
padding: rx;} 
#main .larm { 
background:url (images/title- bg3.jpg) no- repeat px 2px; 

/* 设 置 栏目 标题 背景 图 案 * / 
Padding:8px Opx Opx 40px; 
font- size:14px7 
Color:white; 
margin:0; 
height:32px;} 

#main .larrma { 
background:url (images/mpre2.gif) no- repeat; 

/* 设置 超 链接 的 背景 为 “more” 图 标 * / 
float:right; /* 设置 “more" 图 标 右 浮动 * / 
width:37px; 
height:13px; 
margin- right:4px; } 

#main #xbdt h3 { 
font: 24px "黑体 光 
Color:#900; /* 设置 首 条 新 闻 的 标题 样式 * / 
margin:Opx dpx dpx; } 
#main #xbdt p { 
margin: dx; 
font: 13px/1.6 "宋体 "; 
Color:#06c; 
text- indent:2em; 
border- bottom: lpx dashed #900; /* 设置 首 条 新 闻 与 下 面 新 闻 的 虚线 * /} 
#main .xinwen { 
height :24px; 
line— height:24px; 
background:url (images/article camon.gif) no- repeat @rx dx; 

/* 新 闻 前 的 小 图 标 * / 
font- size:12px7 
Padaing:0 @rx 0 22px;} 

.xinwen b { float: right; /* 每 条 新 闻 的 日 期 显示 在 右 侧 * / } 
uf{ mrgin:0; Padding:0; list- style:none; } 
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a{ color: #333; text— decoration: none; } 
a:hover { color: #900; } 
</style> 


10.7.3 制作 动态 图 片 轮 显效 果 


在 图 10-40 中 ,第 一 个 栏目 框 中 图 片 轮 显 效果 是 通过 包含 一 个 flasha. php 的 文件 实 
现 的 。 该 文件 是 通过 调用 一 个 pixviewer. swf 的 文件 来 实现 图 片 轮 显 功能 的 。 


1，pixviewer. swf 文件 的 原理 


pixviewer. swf 是 个 特殊 的 Flash 文件 ,用 来 实现 图 片 轮 显 框 。 它 可 以 接受 两 组 参 
数 。 第 一 组 参数 包括 pics links 和 texts, 用 于 设置 轮 显 图 片 的 URL 地 址 .图片 的 链接 地 
址 及 图 片 下 的 说 明文 字 。 例 如 : 


var pics= "uppic/1.gif | uppic/2.gif | uppic/3.gif | uppic/4.gif | uppic/5.gif" 

Var links= "onews .php?id= 88 | onews.php?id= 87 | onews.php?id= 86 | onews.php?id= 8 | onews.php?id=7" 

var texts=" 爱 我 脸 城 , 爱 我 师 院 | 国 培 计划 | 青春 舞动 | 长 春花 志愿 者 协会 | 朝 花 夕 拾 , 似 水 流 

年 " 

这 3 个 参数 的 值 都 是 字符 串 ,其 中 pics 参数 指定 了 欲 载 和 图片 的 url, 这 里 使 用 了 相 
对 url, 共 设置 了 5 个 图 片 文件 的 路 径 ( 最 多 可 设置 6 个 )。 各 图 片 路 径 之 间 必 须 用 “| ?号 
隔 开 (最 后 一 幅 图 片 后 不 能 有 ”|”) 。links 参数 定义 了 单 击 图 片 时 的 链接 地 址 ,texts 参数 
保存 了 每 张 图 片 下 的 说 明文 字 , 其 格式 要 求 和 pics 参数 相同 。 上 述 代码 载 和 了 5 幅 图 片 
轮 显 并 定义 了 它们 的 链接 地 址 和 说 明文 字 。 

2. 轮 显 动态 图 片 的 方法 

上 述 将 5 张 图 片 URL 地 址 直接 写 在 pics 变量 中 的 做 法 只 能 固定 地 显示 这 5 张 图 
片 。 而 在 新 闻 网 站 中 ,通常 要 能 自动 显示 最 新 的 5 条 新 闻 中 的 图 片 。 为 此 ,必须 能 从 
News 表 中 读 取 最 新 的 5 条 具有 图 片 的 新 闻 记 录 , 将 记录 的 相关 字段 值 填充 到 这 3 个 参 
数 中 去 。 因 为 News 表 中 的 firstImageName 字段 保存 了 新 闻 中 第 一 张 图 片 的 文件 名 ,而 
这 些 新 闻 中 的 图 片 都 保存 在 uppic 目录 中 ,因此 可 以 采用 如 下 语句 为 pics 添加 每 幅 图 片 
的 URL 路 径 。 

S$pics.= "uppic/".$row["firstImageName"]-"| "7 

而 本 新 闻 系 统 中 所 有 的 新 闻 都 是 链接 到 同一 页 面 onews. php, 只 是 所 带 的 参数 为 该 
条 新 闻 的 id 字段 。 因 此 设置 links 参数 的 语句 如 下 : 

$1inks.= "onews.php?id= ".$row['ID']."|"; 

texts 参数 只 要 装载 每 条 新 闻 的 标题 即 可 ,但 要 把 标题 长 度 限 制 在 16 个 字符 以 内 。 

$texts.=Trimtit ($row['title'],16) ."|"; 


下 面 是 从 数据 库 中 读 取 5 条 具有 图 片 的 记录 ,并 设置 pics、links、texts 参数 ,实现 轮 
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显 动态 图 片 的 代码 (flasha. php) : 


< Script> 
Var pics="™, links= "", texts= "7 
二 // 用 select 语 名 查询 5 条 最 新 的 新 闻 且 新 闻 中 图 片 不 为 空 
$sql= "Select * fram news where firstImageName< > '' and ole true order by ID desc limit 5"; 
$result= S$Sconn- > query ($sql); 
while ($row= $result- > fetch assoc()){ 
$pics.= "uppic/".$row['firstImageName'] ."|"; 
$1inks.= "onews.php?id= ".$row['ID']."|"; 
$texts.=Trimtit ($row['title'],16) ."| "7 


$pics= substr ($pics,0,— 1); // 去 除 最 后 一 条 记录 后 的 “1” 
$links= substr ($1inks,0,— 1); 
$texts= substr ($texts,0,— 1); > 

Var pics="< $pics 2> "5 

Var links="< = $1inks ?> "™; 

Var texts= "< = $texts 2>"; 


< /script> 


说 明 : 创建 结果 集 时 选择 了 图 片 不 为 空 且 允许 作为 图 片 新 闻 显 示 的 5 条 记录 。 在 输 
出 记录 时 ,记录 之 间 必 须 添加 分 隔 符 “|”, 但 最 后 一 条 记录 之 后 不 能 有 分 隔 符 “|”, 为 此 , 通 
过 substr 函数 将 最 后 一 条 记录 后 的 “| "去除 。 


3. 设置 图 片 轮 显 框 的 大 小 
第 二 组 参数 用 来 定义 该 图 片 轮 显 框 及 其 说 明文 字 的 大 小 。 它 有 4 个 参数 ,包括 : 


var focus width= 336 // 定 义 图 片 轮 显 框 的 宽 

var focus height= 224 /定义 图 片 轮 显 框 的 高 

var text height= 14 /定义 下 面 文字 区 域 的 高 

Var swf height= focus height+ text height // 定 义 整个 FIash 的 高 


只 要 修改 这 些 参 数 ,就 能 使 图 片 轮 显 框 改变 成 任意 大 小 显示 。 
4。 其 他 设置 


下 面 还 有 一 些 代码 ,用 来 将 Pixviewer. swf 这 个 Flash 文件 插入 到 网 页 中 ,并 对 其 设 
置 参数 的 代码 。 这 段 代 码 不 需要 做 多 少 修改 ,只 要 保证 引用 Pixviewer. swf 文件 的 URL 
路 径 正确 ,还 可 以 设 定 文字 部 分 的 背景 颜色 。 找 到 第 二 个 document. write, 粗 体 字 为 设 
置 的 地 方 。 

document .write ('< param name= "allowscriptAcoess" value= "sameDomain"> < param name= "movie" value=" 

images/pixviewer.swf"> < param name= "quality" value= "high"> < param name= "bgcolor" valuer "$ffFFFF"> 

I 
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10.7.4 制作 新 闻 内 容 页 


新 闻 内 容 页 实际 上 就 是 显示 一 条 记录 的 页 面 , 它 首先 获取 前 一 页 面 传 过 来 的 记录 id， 
找到 id 对 应 的 新 闻 后 ,将 要 显示 的 字段 用 不 同 的 样式 输出 到 页 面 的 对 应 位 置 上 ,如 图 10-41 
所 示 。 例 如 ,title 字段 以 24px 红色 字体 显示 在 页 面 上 方 ,而 content 字段 以 正常 字体 显 
示 在 页 面 中 央 。 











当前 位 置 : 首页 > 规章 制度 
, 


也 
De th 
et [Sevreonend 发 市， 人 红头 ED 


建立 和 健全 系 务 公开 制度 是 做 好 系 务 公开 的 基础 和 前 提 ， 我 系 从 实际 出 发 ， 做 到 统一 领导 ， 
-现状 计 工作 中 下 断 民 全 和 完了 作 抽 宙 ， 加 旨 志 务 公开 取信 末代 及时 失 和 实权 








图 10-41 显示 新 闻 详 细 页 面 


1. 显示 新 闻 的 制作 


新 闻 详 细 页 面 首先 应 使 用 $_GETL'id] 获 取 其 他 页 超 链接 中 传 过 来 的 id 参数 ,再 根 
据 该 id 构造 Select 语句 找到 这 条 新 闻 , 然 后 将 新 闻 中 的 各 个 字段 存 人 到 数组 $row 中 。 
代码 如 下 : 





Hm 











<? require('conn.php")7 
$icd- intval ($_GET["id']); 
$sql= "select * fram news where id- $id"; 


$result= $Sconn- > query ($sql); // 根 据 记 录 ia 创 建 结 果 集 
if($result- >num rows> 0){ 
$row= $result— > fetch assoc(); 上 > 


接 下 来 ,就 可 以 将 该 条 记录 的 各 个 字段 输出 到 页 面 的 相应 位 置 , 主 要 代码 如 下 : 


<title><= $row['title'] 2>< /title> <!-- 将 title 字 段 显示 在 页 面 标题 中 --> 
“<hi><e$row['title'] 2></h> 

当前 位 置 : <a hre 仁 "index.php"> 首 页 < /a> ggt;<a href= "otype.php?owenl=< = $row['bigclassname'] ? 
> 必 <2-S$row['bigclassname'] 2> 

发 布 者 :< 三 $row["user'] 2 发布 时 间 :< 2 notime (Srow['infotime'])?> 阅读 :< font color="#ffcc00"> 
<2-S$row[mhits'] 2></font> 次 

<div style= 'font— size:7.5pt'> 

<hr width= "700" size= "1" color= "cocc99"> 

< $row['content'] 2>< /div> 


显示 完结 果 集 后 ,必须 将 结果 集 和 数据 库 连 接 关闭 ,否则 可 能 会 影响 网 站 内 其 他 页 面 
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的 打开 速度 ,关闭 结果 集 和 数据 库 连 接 的 代码 如 下 : 


<? $result->close(); 


$coonn- > close(); > 
2.“ 上 一 条 ”下 一 条 ”新 闻 链 接 的 制作 


在 显示 新 闻 页 面 中 ,“ 上 一 条 ”链接 可 以 链接 到 该 新 闻 所 属 栏目 中 的 上 一 条 新 闻 ;“ 下 
一 条 ”链接 则 转 到 同 栏目 中 的 下 一 条 新 闻 , 如 图 10-41 所 示 。 虽 然 这 种 功能 对 于 新 闻 网 站 
来 说 并 不 是 十 分 必要 ,但 对 于 博客 类 网 站 来 说 却 是 不 可 或 缺 的 ,因为 我 们 通常 都 是 通过 单 
击 “ 下 一 条 ”链接 来 一 条 条 查看 博客 主人 的 日 志 。 

制作 的 思路 如 下 :“ 上 一 条 ”链接 是 要 找到 本 栏目 中 上 一 条 新 闻 的 id 值 。 这 不 能 通 
过 将 本 条 新 闻 的 id 值 减 1 实现 ,因为 这 样 得 到 的 id 值 对 应 的 新 闻 可 能 是 其 他 栏目 的 新 
闻 , 甚 至 可 能 是 已 经 被 删除 了 的 新 闻 ( 删 除 记 录 后 其 id 值 不 会 被 新 添加 的 记录 所 占用 )。 
而 应 该 通过 一 个 查询 语句 ,找到 在 同一 栏目 (bigclassname) 中 所 有 id 值 比 该 新 闻 的 id 值 
小 的 记录 ,再 对 这 些 记录 进行 逆序 排列 , 取 其 中 id 值 最 大 的 一 条 ,也 就 是 逆序 排列 后 结果 
集中 的 第 一 条 记录 。 

因此 ,首先 要 通过 id 找到 该 条 记录 对 应 的 大 类 名 (bigclassname) ,将 其 保存 到 变量 
$ bcn 中 ,然后 关闭 结果 集 , 再 新 开 一 个 查询 上 一 条 新 闻 id 和 title 的 结果 集 。 代 码 如 下 : 

<? regqujire('conn.php')7 

$id= intval ($_GET['id"]); 

$sql= "select bigclassname from news where ID= $id "; // 根 据 记 录 i 找到 大 类 名 

$result= $conn- > query ($sql); 

$row= $result— > fetch row(); 

S$bcn= $row[0]; 

// 找 到 该 大 类 中 与 该 记录 相 邻 的 上 一 条 记录 
$sql= "select ID, title from news where ID< $id and Bigclassname= '$ban"' order by ID desc limit 1"7 


$result= $conn- > query ($sq); 
if($result— >num rows==0) // 如 果 结 果 集 为 空 

$pret= 0; // 令 $pret 为 0 表示 上 一 条 记录 没有 了 
else { 


$row= $result- > fetdh assoc(); 

$pret= $row['ID']; 

$pretit= $row['title']; } 
$sql= "select ID,title from news where ID> $id and Bigclassname= '$ban' order by ID limit 1"; 
$result= $conn- > query ($sql); 
if ($result- >num rows==0) 


Snextt= 0; // 令 $nextt 为 0 表示 下 一 条 记录 没有 了 
else { 

$row= Sresult- > fetch assoc(); 

S$nextt= $row['ID']; 


Snexttit= $row['title']; } 


52 WW 准 网 页 设计 与 PHP 


接 下 来 ,在 页 面 上 输出 * 上 一 条 ”下 一 条 ”及 “当前 位 置 ” 的 链接 ,代码 如 下 : 


<? 证 (Snextt<> 0){ // 如 果 有 下 一 条 记录 > 
<atitle= "< 2 $nexttit 2> " style= "float:right;padding— right:16rx;" href= "onews.php?id=< =$ 
nextt ?> 吃 下 一 条 ggt;ggt;< /a> 
还 二 党 
if($pret<>0) { // 如 果 有 上 一 条 记录 > 
<atitle= "< = $pretit ?> " style= "float:right;padding- right:16px;" href— 
"onews.php?id=< =$pret 2> "> gltiglt; 上 一 条 < /a> 
< 
当前 位 置 :<a hre 全 "index.php"> 首 页 < /a> ggt; 
<a href= "otype.Fhp?owenl=< 关 Sbcn > "><E$ban </ 


3. 记录 新 闻 的 单 击 次 数 


只 要 将 下 面 的 语句 放 在 页 面 的 适当 位 置 ,用 户 每 打开 一 次 该 页 面 ,就 会 使 hits 值 
加 1。 





<? $sql= "update news set hits=hits+ 1 where id= $id"; 
$conn- > query ($sql); 区 


10.7.5 制作 栏目 列表 页 


栏目 列表 页 用 来 显示 某 个 栏目 中 的 新 闻 , 如 图 10-42 所 示 。 当 用 户 单 击 导 航 条 上 的 
某 个 导航 项 或 栏目 框 上 的 more 图 标 时 ,都 将 链接 到 栏目 列表 页 ,并 将 栏目 名 以 URL 参 
数 的 形式 传递 给 该 页 。 因 此 ,栏目 列表 页 首先 要 获取 栏目 名 。 

在 网 页 左 侧根 据 栏 目 名 显示 子 栏目 列表 的 代码 如 下 : 


<? S$owenl=$ GET["owenl"]; // 获 取 首 页 传 来 的 一 级 栏目 名 
$cwen2=$_GET["Owen2"]; 1/ 获取 首页 传 来 的 子 栏目 名 
// 根 据 一 级 栏目 名 显示 下 面 的 子 栏目 名 
$result= $ocmm- > query ("Select * Fram SrallClass Where BigClassName= '$owenl'"); 
if ($result- >num rows> 0){ 
while ($row= $result— > fetch assoc()){ > 
< tr bgColor= #EFEFEF> <!-- 一 行 显示 一 个 子 栏目 名 --> 
< td height= "25" align= "center" bgoolor= "#EFFAD8"> 
<a href= "otype.Hhp?iowanl=<2=$owenl ?> kowen2- < 六 Srow["srallClassNemen] > "> 
<b><2 关 Srow["SmallClassName"] ?></b></a></to>< /tr> 





< }} > 
在 网 页 右 侧 根据 栏目 名 执行 查询 得 到 该 栏目 新 闻 记 录 的 列表 并 显示 。 代 码 如 下 : 
人 证 (Gowenl<> " gg$owen2< > "™") // 如 果 获 取 的 一 级 栏目 和 子 栏目 名 都 非 空 


$sql= "select * fram news where BigClassName= '$owenl' and SmallClassName— 
1$owen2' order by ID desc"; 
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else if($owenlI<>"™)  // 如 果 获 取 的 一 级 栏目 名 不 为 空 , 则 根据 一 级 栏目 名 查询 
$sql= "select * fran news where BigClassName= '$owenl' order by ID desc"; 
$result= $conn- > query ($sql); 

SRecordcount= $result— > num rows; > 


接 下 来 就 是 将 该 结果 集 所 有 记录 的 标题 和 日 期 等 字段 循环 输出 到 页 面 上 。 





























湖南 师范 大 学 博士 生 导师 莫 志 斌 教授 应 米 来 我 系 讲学 [2010-10-22] (回访 95 次 ) 


人 文 社会 科学 系 2003-2006 年 学 术 成 果 统 计 表 [2006-12-24] (阅读 1982 次 ) 
湘潭 大 学 李 广 一 教授 应 游 来 我 系 作 形势 与 政策 报告 ”[2006-06-19] (网 读 1189 次 ) 
(人生 普 理 散 论 ) 一 一 -} 摩 建 平 著 [2005-06-21] (阅读 1568 次 ) 

(君子 人 格 论 ) 一 一席 建 平 敌 。 [2005-06-21] (阅读 1661 次 ) 

大 学 生 思 想 品 德 课 “ 六 课 型 ”教学 的 理论 与 实践 思考 [2005-06-14] ( 辐 读 1947 次 ) 


左 侧 子 栏目 导航 首页 上 一 页 下 一 页 尾 页 页 次 : 1! / ! 页 共 6 条 记录 ! 条 记录 /页 秃 到 :[ ] [EEE 
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图 10-42 分 栏目 首页 
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由 于 每 个 栏目 的 记录 可 能 有 很 多 ,因此 图 10-42 中 的 分 栏目 首页 还 应 具有 分 页 功能 ， 
分 页 功能 的 实现 请 读者 仿照 10. 5. 2 节 中 介绍 的 方法 实现 。 


10.7.6 使 用 FCKeditor 编辑 器 


我 们 编辑 新 闻 时 ,如 果 用 表单 中 的 多 行文 本 域 , 则 只 能 在 其 中 输入 纯 文本 ,如 果 要 对 
这 些 文本 进行 网 页 排版 则 很 不 方便 。 为 此 ,人 们 开发 了 在 线 编辑 器 软件 ,这 些 在 线 编辑 器 
就 像 Dreamweaver 的 设计 视图 ,可 以 对 新 闻 中 的 文字 和 图 片 进行 可 视 化 排版 ,使 新 闻 以 
美观 .适合 阅读 的 版 式 显示 出 来 。 

FCKeditor 是 目前 流行 的 “所 见 即 所 得 ”的 在 线 编辑 器 , 它 具 有 功能 强大 、 体 积 小 巧 、 
跨 浏 览 器 支持 多 种 Web 编程 语言 等 特点 。 本 节 以 FCKeditor 2. 6. 8 版 本 为 例 ,结合 新 
闻 发 布 系统 讲解 FCKeditor 的 使 用 。 

在 百度 上 搜索 “FCKeditor 下 载 ”, 将 下 载 的 压缩 文件 FCKeditor_2. 6. 8 解压 到 新 闻 
发 布 系统 的 根 目录 下 即 可 ,FCKeditor 的 目录 结构 如 图 10-43 所 示 。 
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= = fckconfig. js 
器 _suples 四 editor @ JSeript Script File 
14 IE 


tor. js ] N fckeditor. lasso fckeditor. php 
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图 10-43 ”FCKeditor 的 目录 结构 

















到 


fckeditor 文件 夹 下 比较 重要 的 目录 和 文件 有 : 

(1) editor 目录 定义 了 编辑 器 的 CSS 样式 表 、 皮 肤 文 件 . 图 片 以 及 文件 上 传 程序 等 
文件 。 

(2) _samples 目录 提供 了 FCKeditor 的 示例 程序 。 

(3) fckeditor_php5. php 是 PHP 程序 实例 化 FCKeditor 的 类 文件 。 

(4) fckconfig. js 是 FCKeditor 工具 栏 集合 的 配置 文件 ,这 两 个 文件 对 于 我 们 配置 和 
使 用 该 编辑 器 具有 至 关 重 要 的 作用 。 


1. 调用 fckeditor 编辑 器 


fckeditor_php5. php 代码 中 定义 了 一 个 FCKeditor 类 ,调用 FCKeditor 编辑 器 必须 
先 用 该 类 创建 一 个 实例 化 对 象 。 而 要 创建 FCKeditor 类 的 实例 ,必须 先 载 人 FCKeditor 
类 文件 。 例 如 : 

<? incluge ("fckeditor/fckeditor php5.php"); // 载 入 FcKeditor 类 文件 

$cECKeditor= new FCKeditor ('content.'); // 创 建 FcKeditor 类 的 实例 

> 

接 下 来 ,设置 FCKeditor 实例 的 根 目 录 以 及 FCKeditor 实例 其 他 成 员 属性 的 值 , 最 后 
用 Create() 方 法 创建 编辑 器 ,以 10.4.5 节 中 新 闻 编 辑 页 面 editform. php 为 例 , 将 该 程序 


中 多 行文 本 框 代码 : 
< textarea name= "content" cols= "30" rows= "2"> < = $row['content'];?> < /textarea> 
替换 为 : 
<? jinclude ("fckeqitor/fckeditor php5.php"); // 载 入 FCKeditor 类 文件 
SoECKeditor= new FCKeditor ('content'); // 创 建 FCKeditor 类 的 实例 
SaECKeditor > Basepath= 'fckeditor/'; // 设 置 FcKeditor 目录 地 址 为 


// 当 前 目录 下 的 fckeditor 目录 ,这 样 FCKeditor 才能 找到 它 的 相关 资源 文件 
SoECFKeditor- > Width= '95%'; // 设 置 显示 宽度 


第 10 章 PHP 访问 训 据 库 =(65 











SoECKeditor -> Height= '400px'; // 设 置 显示 高 度 
$oECKeditor- > Value= $row['content']; // 设 置 编辑 器 的 值 ,将 显示 在 编辑 器 中 
SoFCKeqditor > Create (7 // 创 建 编辑 器 
> 
则 通过 更 新 链接 进入 editform. php 页 面 的 运行 结果 如 图 10-44 所 示 。 
更 新 留言 
留言 标题 ， | 国 上 E- 洲 | * 
留言 人 ， FRR +* 





联系 方式 ， [sheno@aq. con 本 
留言 内 容 ， | 同 汪 R 局 | 回 口 区 | 国 j 久生 龟 岛 国 | 瑟 区 ji 二 | 得了 | 国 迟 


辐 se 了 原 国志 国 鲁 
inzyuwln wis 汪 | 这 素 6 i 匡 委 本 豆 j 旬 多 出 | 国 @ 口 三 @ 心 写 


"格式 Eu 1" 大 小 上 -i 多 -ji 国 了 区 | 加 




























确定 | 
图 10-44 将 FCKeditor 编辑 器 找 入 到 editform. php 页 面 中 





说 明 : 一 个 FCKeditor 编辑 器 实例 和 普通 的 表单 控件 一 样 ,也 具有 name 属性 和 
value 属性 ,上 例 中 编辑 器 的 name 属性 值 为 content, 是 通过 new FCKeditor('content”) 设 
置 的 ,value 属性 值 为 $row[Lcontent 世 ,是 通过 $oFCKeditor- 二 Value 属性 来 设置 的 。 因 
此 ,要 获取 该 编辑 器 中 的 内 容 , 可 以 用 $ content= $_POST[I"content"] 来 获取 ;要 在 该 编 
辑 器 中 显示 内 容 , 可 以 通过 ”$oFCKeditor- 二 Value 一 要 显示 的 内 容 '; ”语句 来 实现 。 

对 于 10. 4. 2 节 中 新 闻 添 加 页 面 addform. php, 也 可 以 使 用 上 述 方法 将 多 行文 本 域 替 
换 成 FCKeditor 编辑 器 ,只 是 因为 新 闻 添 加 页 面 中 的 新 闻 内 容 为 空 ,因此 不 需要 设置 
$oFCKeditor- 之 Value 属性 的 值 。 


2. 配置 fckeditor 编辑 器 的 文件 上 传 功能 


FCKeditor 编辑 器 内 置 了 文件 管理 功能 ,使 得 用 户 能 够 上 传 图 像 或 文件 , 它 的 文件 管 
理 程序 放 在 editor/filemanager/ 目 录 下 ,FCKeditor 提供 了 文件 浏览 和 文件 快速 上 传 功 
能 ,文件 浏览 ?为 用 户 提供 了 3 种 功能 : 浏览 服务 器 上 已 存在 的 多 媒体 文件 \ 在 编辑 器 中 
浏览 多 媒体 文件 以 及 上 传 本 地 文件 到 服务 器 。“ 快 速 文 件 上 传 ”为 用 户 提 供 了 快速 上 传 本 
地 文件 至 服务 器 的 功能 ,是 “文件 浏览 ”功能 的 子 集 。 

为 了 能 够 使 用 快速 文件 上 传 功 能 ,需要 进行 一 些 配置 , 打开 fckeditor\ editor\ 
filemanager\connectors\php 目录 中 的 config 文件 ,找到 如 下 两 行 代码 ; 

$Config['Enabled']=true; /| 将 false 改 为 true 表 示人 允许 上 传 

$Config['UserFilesPath']= "upfiles/'; // 定 义 上 传 目 录 


再 打开 fckeditor 根 目录 下 的 fckeditor. js: 确 保 以 下 两 行 的 值 为 php: 


Var FileBrowserlanguage = "php'; 
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Var QuickUploadlanguage ='php'; 
至 此 ,Apache 服务 器 已 能 正常 上 传 文件 ,但 对 于 IIS 服务 器 ,还 需要 设置 上 传 目录 的 
绝对 路 径 ,找到 类 似 下 面 的 代码 将 其 修改 为 : 


$Config['UserFilesAbsolutePath']= 'D:\NRppSerwWNwwwNNupfiles'7 





3. 配置 对 上 传 文件 进行 重 命名 


如 果 要 上 传 的 文件 文件 名 中 存在 中 文字 符 , 则 会 出 现 乱 码 问题 ,导致 引用 的 文件 
URL 不 对 ,解决 这 个 问题 的 办 法 是 将 所 有 上 传 文件 的 文件 名 重 命名 ,方法 如 下 : 
找到 editor \ filemanager\ connectors\ php 目录 下 的 io. php 文件 ,将 函数 名 为 
SanitizeFolderName 的 函数 代码 修改 如 下 : 
$arr= explode ('.', $sNewFileName); 
$ext=array pop($arr);  ”// 第 一 个 数组 元 素 保存 了 . 前 的 文件 名 
$filename= date ("Ymd His ') .rand(1000,9999)."'.'.$ext; 
retum $filename; 
} 
SanitizeFolderName 函数 的 功能 是 将 上 传 文件 的 文件 名 重 命 名 ,新 的 文件 名 按照 日 
期 时 间 随 机 数 的 格式 命名 , 既 可 防止 修改 后 的 文件 名 重 名 ,又 可 防止 新 的 文件 名 中 出 现 中 
文字 符 。 


4. 解决 文件 上 传 功能 的 安全 性 问题 


文件 上 传 可 能 给 网 站 带 来 巨大 的 安全 隐患 ,假设 网 站 攻击 者 猜测 到 了 文件 上 传 程序 
的 路 径 , 则 他 可 以 直接 访问 该 程序 ,以 上 传 文件 。 为 此 ,需要 判断 上 传 文件 者 是 否 是 登录 
成 功 的 用 户 , 这 可 以 通过 Session 变量 判断 。 假 如 网 站 采用 $ _SESSION[L'admin] 验 证 管 
理 员 是 否 已 经 登录 , 则 只 需 打开 config. php 文件 。 将 配置 上 传 的 代码 修改 为 : 


$Config['Enabled']= isset ($_SESSION['admin']); 


这 样 , 当 用 户 未 登录 时 ,isset 函数 将 返回 false。 


10.8 数据库 接 口 层 PDO 


PHP 提供 了 操作 各 种 数据 库 的 内 置 函 数 , 通 过 这 些 内 置 函 数 PHP 可 直接 访问 数据 
库 。 例 如 ,使 用 mysql 或 mysqli 函数 库 能 够 直接 访问 MySQL 数据 库 ,使 用 mssql 函数 库 
能 直接 访问 SQL Server 数据 库 。 而 如 果 要 访问 Oracle 数据 库 ,就 需要 使 用 ora 函数 (或 
oci 数据 抽象 层 )。 可 见 ,访问 每 种 数据 库 时 都 需要 学 习 特 定 的 函数 库 , 这 是 比较 麻烦 的 。 
更 重要 的 是 ,如 果 要 将 PHP 程序 移植 到 其 他 数据 库 上 ,就 需要 修改 大 量 的 程序 代码 ,使 
移植 难以 实现 。 

为 了 解决 这 个 问题 ,出 现 了 “数据 库 接口 层 ” 的 概念 。 通 过 数据 库 接口 层 可 以 访问 任 
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意 类 型 的 数据 库 , 而 PHP 程序 只 要 与 接口 层 打交道 ,发 送 统一 的 指令 给 这 个 通用 接口 ， 
再 由 接口 层 将 指令 传输 给 任意 类 型 的 数据 库 ,如 图 10-45 所 示 。 
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图 10-45 数据库 访 问 接口 层 




















PDO(PHP Data Object) 是 为 PHP 访问 数据 库 定 义 的 一 个 轻 量 级 的 ,一 致 性 的 数据 
库 接口 , 它 提 供 了 一 个 数据 库 访 问 抽象 层 , 作 用 是 统一 各 种 数据 库 的 访问 接口 ,使 得 程序 
能 够 轻松 在 不 同 数据 库 之 间 进行 切换 .使 数据 库 间 的 移植 变 得 容易 实现 。 这 样 , 无 论 使 用 
什么 数据 库 , 都 可 以 通过 一 致 的 函数 执行 查询 和 获取 数据 。 

提示 : PDO 是 PHP 5 新 加 入 的 一 个 重大 功能 ,并 且 PHP 6 将 默认 使 用 PDO 来 操作 
数据 库 , 可 见 PDO 是 将 来 PHP 在 数据 库 处 理 方面 的 主要 发 展 方向 。 

常见 的 数据 库 接口 层 除 了 PDO 外 ,还 有 ADO(ActiveX Data Obiect),ADO 是 微软 
推出 的 ,一 般 用 来 访问 微软 的 数据 库 , 如 SQL Server 或 Access。 而 PDO 一 般 用 来 让 
PHP 访问 非 微软 的 数据 库 , 如 果 一 定 要 用 PDO 来 访问 微软 的 数据 库 ,那么 可 以 使 用 它 提 
供 的 PDO_ODBC 驱动 连接 ODBC ,再 通过 ODBC 访问 微软 的 数据 库 。 


10. 8.1 PDO 的 安装 


安装 PHP 5. 1 以 上 版 本 会 默认 安装 PDO, 但 使 用 之 前 , 仍 需 要 进行 一 些 相 关 的 配 
置 。 打 开 PHP 的 配置 文件 php. ini, 在 其 中 的 Dynamic Extensions 一 节 找 到 ，: 
?extensior=php pdp.ql1 


将 前 面 的 “;” 号 (注释 符 ) 去 掉 , 就 打开 了 PDO 所 有 驱动 程序 共享 的 扩展 。 接 下 来 ,还 需要 
激活 一 种 或 多 种 PDO 驱动 程序 ,添加 下 面 的 一 行 或 多 行 代码 即 可 。 


extension= php pdb mysql.d1ll // 如 果 要 使 用 wsop 那 么 添加 这 一 行 
extension= Php pdb mssql.dl1 // 如 果 要 使 用 SQL server 

extension= Fhp pdb oci.dll // 如 果 要 使 用 oracle 

extension= php pop odbc.dll // 如 果 要 使 用 orec 驱动 程序 


保存 修改 后 的 php. ini 文件 ,然后 重启 Apache 服务 器 , 即 完成 了 PDO 的 安装 。 
10. 8.2 创建 PDO 对 象 连接 数据 库 
在 使 用 PDO 与 数据 库 交 互 之 前 ,必须 先 创建 一 个 PDO 对 象 。 创 建 PDO 对 象 有 多 种 
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方法 ,其 中 最 简单 的 一 种 方法 如 下 : 

对 象 名 =new PDO(string DSN, string usemame, string password, [array driver options]); 

说 明 : 

(1) 第 一 个 必 选 参数 是 数据 源 名 (DSN) ,用 来 指定 一 个 要 连接 的 数据 库 和 连接 使 用 
的 驱动 程序 。 其 语法 格式 为 : 


驱动 程序 名 : 参数 名 = 参数 值 ; 参数 名 = 参数 值 
例如 ,连接 MySQL 数据 库 和 连接 Oracle 数据 库 的 DSN 格式 分 别 如 下 : 


mysql :host= localhost;doname= testdb 
oci :doname= //localhost:1521/mydb 
(2) 第 二 个 参数 和 第 三 个 参数 分 别 用 于 指定 连接 数据 库 的 用 户 名 和 密码 ,是 可 选 
参数 。 
(3) 第 四 个 参数 driver_options 必须 是 一 个 数组 ,用 来 指定 连接 所 需 的 所 有 额外 选 
项 ,传递 附加 的 调 优 参数 到 PDO 底层 驱动 程序 。 
下 面 是 一 个 创建 PDO 对 象 并 连接 MySQL 数据 库 guestbook 的 代码 (conn. php): 
和 清单 10- 19 conn.php ”使 用 PDo 对 象 连接 数据 库 ----------- 
<? $dsre= "mysql:host= localhost;dbname= guestbook"7 
$db= new PDO($dsn, 'root' "111'); // 连 接 数 据 库 
$db- > query ('set names gb23127) 7 // 设 置 字符 集 





> 


提示 : 上 述 创建 的 连接 数据 库 代 码 默 认 不 是 长 连接 ,如 果 需 要 数据 库 长 连接 ,需要 用 
到 第 四 个 参数 : array(PDO::ATTR_PERSISTENT 王 > true) , 即 ， 


$db= new PDO ($dsn, 'root', '111'，array(EDO::RMITR_FERSISTFNT= > true)); 


当 PDO 对 象 创建 成 功 后 ,与 数据 库 的 连接 已 经 建立 ,就 可 以 使 用 该 对 象 了 。PDO 对 
象 中 常用 的 成 员 方 法 如 表 10-4 所 示 。 


表 10-4 PDO 类 中 常用 的 成 员 方 法 














方 法 名 描 述 

query() 执行 一 条 有 结果 集 返 回 的 SQL 语句 ,并 返回 一 个 结果 集 PDOStatement 对 象 
exec() 执行 一 条 SQL 语句 ,并 返回 所 影响 的 记录 数 

lastInsertId() 获取 最 近 一 条 插入 到 表 中 记录 的 自 增 id 值 

prepare() 负责 准备 要 执行 的 SQL 语句 ,用 于 执行 存储 过 程 等 





调用 PDO 对 象 的 方法 可 以 使 用 “对 象 名 -二 方法 名 ”的 形式 。 使 用 PDO 对 象 的 query() 
方法 执行 Select 语句 后 会 得 到 一 个 结果 集 对 象 PDOStatement, 该 对 象 的 常用 方法 如 
表 10-5 所 示 。 


表 10-5 PDOStatement 类 中 常用 的 成 员 方法 
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方法 名 描 述 


以 数组 或 对 象 的 形式 返回 当前 指针 指向 的 记录 ,并 将 结果 集 指针 移 至 下 一 
行 , 当 到 达 结 果 集 末尾 时 返回 False 


fetchAll(O) 返回 结果 集中 所 有 的 行 , 并 赋 给 返回 的 二 维 数组 ,指针 将 指向 结果 集 末 尾 
fetchColumn() 返回 结果 集中 下 一 行 某 个 列 的 值 
设置 fetch() 或 fetchAll() 方 法 返回 结果 的 模式 ,如 关联 数组 .索引 数组 、 混 合 





fetch() 











setFetchMode() 














数组 .对 象 等 
rowCount() 返回 结果 集中 的 记录 总 数 . 仅 对 query() 和 prepare() 方 法 有 效 
columnCount() 在 结果 集中 返回 列 的 总 数 
bindColumn() 将 一 个 列 和 一 个 指定 的 变量 名 绑 定 (必须 设置 fetch 方法 为 FETCH_BOTH) 


10.8.3 使 用 query() 方 法 执行 查询 


PDO 访问 数据 库 和 mysql 函数 访问 数据 库 的 步骤 基本 上 是 一 致 的 , 即 ; 

(1) 连接 数据 库 ; 

(2) 设置 字符 集 ; 

(3) 创建 结果 集 ; 

(4) 读 取 一 条 记录 到 数组 ; 

(5) 将 数组 元 素 显示 在 页 面 上 。 

使 用 query() 方 法 可 以 执行 一 条 select 查询 语句 ,并 返回 一 个 结果 集 。 例 如 : 


$result= $db- > query('select * fram news limit 20°'); 
也 可 使 用 query() 方 法 来 设置 字符 集 ,但 必须 在 创建 结果 集 之 前 使 用 。 例 如 
$db- > query('set names go2312'); 


例 10.1 使 用 query() 执 行 查 询 的 示例 程序 。 
该 程序 将 以 表格 的 形式 显示 结果 集中 所 有 记录 到 页 面 上 ,运行 结果 如 图 10-20 所 示 。 


<? $dsre "mysql:host= localhost;doname= guestbook"7 
$db=new PDD($dsn ‘root', "111'); // 连 接 数 据 库 
$db- > query ('set names go2312'); // 设 置 字符 集 
$result=$db- > query('select * from1yb'); ”// 执 行 查询 创建 结果 集 
$result— > setFet dMode (PDO: :FETCH ASSOC); 
//print r($row $result— > fetch()); 

> 

< table border= "1" width= "95%"> 


< tr bgcolor= "#e0e0e0"> 
<th> 标 题 < /th><th> 内 容 < /th><th> 作 者 < /th><th>email< /thb><th> 来 自 </th>< /tr> 
<? while($row $result— > fetch()){ // 读 取 一 条 记录 到 数组 $row 中 


> 
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<tr><tod><= $row['title'];2>< /to><to><= $row['content'];2> < /to> 





<to> < $row['author']; 2 < /to> <to> < $rowl'amil']; 2 < /to> 
<to>< $row['ip'];2>< /to < /tr> 
< 
</table><p> 共 有 <2-Sresult- > rowCount(02> 行 < /> 
说 明 : 
(1) 创建 了 结果 集 $result 后 ,可 以 用 $resultr 二 fetch() 方 法 读 取 当 前 记录 到 数组 
中 ,该 数组 默认 是 混合 数组 ,如 果 和 希望 fetch() 方 法 只 返回 关联 数组 ,有 两 种 方法 : 
@O 在 创建 了 结果 集 后 用 $ result- 二 setFetchMode(PDO::FETCH_ASSOC ) 方 法 进 
行 设置 。 
给 fetch() 方 法 添加 参数 ,如 $row= $result- 二 fetch(PDO::FETCH_ASSOC) 或 
$row 二 $result- 之 fetch(1)。 在 fetch() 参 数 的 可 选 值 中 ,0 代表 混合 数组 ,默认 值 ;1 或 
2 代表 关联 数组 ,3 代表 索引 数组 。 本 例 中 采用 的 是 第 四 种 方法 。 
(2) $ result- 之 rowCount() 方 法 可 以 返回 结果 集中 的 记录 总 数 。 
(3) 可 以 使 用 print_r 方 法 打印 $result- 之 fetch(2) 返 回 的 数组 ,如 果 去 掉 本 例 中 
print_r 语句 前 的 注释 符 ,就 会 输出 : 
Array([ID]=>1 [title]=> 祝 大 家 开心 [content]=> 非 常 感谢 大 家 长 期 以 来 的 帮助 [author]=> 唐 三 彩 
[email]= > sanyo@ tam.oom [ip]=> 59.51.24.37) 
(4) 在 PDO 中 使 用 query() 方 法 创建 的 结果 集 $ result 是 对 象 类 型 , var_dump 
($result) 会 得 到 : 


dbject (EDoStaterent)#2 (1) { ("oueryString"]=> string(17) "select * fram 1yo" } 


而 以 前 用 mysql_query() 创 建 的 结果 集 $ result 是 资源 类 型 ,两 种 结果 集 的 数据 类 型 
是 不 同 的 。 


10.8.4 使 用 fetchAll() 方 法 返回 所 有 行 


fetchAll() 方 法 将 返回 一 个 二 维 数组 ,该 二 维 数组 中 包含 了 结果 集中 的 所 有 行 ,并 将 
结果 集 指针 移动 到 结果 集 末尾 。 示 例 代码 如 下 ,运行 效果 如 图 10-20 所 示 。 


<? Tecuire ('oconmn.php'); //conn.bhp 见 10.8.2 节 清单 10- 19 
$result= $db- > query('select * from 1yb'); // 执 行 查询 创建 结果 集 
$result— > setFetchMpade (PDO: :FETCH ASSOC); 

> 
< table border= "]" width= "95%"> 

< tr bgcolor= "#e0e0e0"> 
<tt> 标 题 </t><t> 内 容 </tt><th> 作 者 </t><th>email< /tH><ti> 来 自 </th> 
< /tr> 


<? while($rows=$result->fetchAal11()){ // 读 取 所 有 记录 到 二 维 数组 $rows 中 
foreach ($rows as$row) { /| 将 每 条 记录 放 到 数组 $row 中 
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<tr><tod><= $row['title'];2>< /to><to><= $row['content'];2> < /to> 
<to><e=$row['author'];2>< /to><to < $row[l'enil'];2> < /to> 
<to><=$rw['ip'];2>< /to>< /tr> 





<?}1> 
</tablez<p> 共 有 < 2-Sresult- > rowCount()2> 行 < /p> 
请 注意 : 由 于 fetchAll() 返 回 的 是 二 维 数组 ,因此 读 取 其 中 的 所 有 字段 需要 使 用 双重 
循环 。 
对 于 结果 集 比 较 小 时 ,用 fetchAll() 方 法 效率 较 高 ,因为 它 可 减少 从 结果 集中 移动 指 
针 的 次 数 ;但 对 于 大 结果 集 ,一 次 读 取 所 有 记录 会 占用 很 大 内 存 , 此 时 使 用 fetch() 方 法 更 
合适 。 


10.8.5 使 用 exec() 方 法 执行 增 、 删 、 改 命令 


如 果 要 用 PDO 对 数据 库 执行 添加 、 删 除 、 修 改 操作 , 则 可 以 使 用 exec() 方 法 ,该 方法 
将 处 理 一 条 SQL 语句 ,并 返回 所 影响 的 记录 条 数 。 
例 10.2 使 用 exec() 方 法 修改 记录 的 示例 程序 。 


<? reqire('conmn.php'); //conn.bhp 见 10.6.2 节 清单 10- 19 
$affected= $db- > exec("update 1yb set content= ' 用 PDD 修 改 记 录 ' where author= ' 蓉 鞭 '"); 
> 


<p> 共 有 < 2-$affected ?> 行 记录 被 修改 < /p> 


如 果 要 执行 添加 、 删 除 操作 ,只 要 把 上 例 中 的 SQL 语句 改 为 insert 或 delete 语句 
即 可 。 
读者 可 以 使 用 exec() 方 法 改写 10.4 节 中 的 所 有 程序 ,实现 对 记录 的 增 、 删 、 改 操作 。 


10. 8.6 使 用 prepare() 方 法 执行 预 处 理 语句 


PDO 提供 了 对 预 处 理 语句 的 支持 。 预 处 理 语句 的 作用 是 : 编译 一 次 ,可 以 多 次 执 
行 。 它 会 在 服务 器 上 缓存 查询 的 语法 和 执行 过 程 ,而 只 在 服务 器 和 客户 端 之 间 传 输 有 变 
化 的 列 值 ,以 此 来 消除 这 些 额外 的 开销 。 例 如 ,要 插入 1000 条 记录 ,如 果 使 用 exec 方法 
则 需 执 行 1000 条 insert 语句 ,而 使 用 预 处 理 语句 则 只 要 编译 执行 一 条 插入 语句 。 

对 于 复杂 查询 来 说 ,如 果 要 重复 执行 许多 次 有 不 同 参 数 的 但 结构 相同 的 查询 ,通过 使 
用 一 个 预 处 理 语 句 就 可 以 避免 重复 分 析 、 编 译 、 优 化 的 环节 。 因 此 在 执行 重复 的 单个 查询 
时 快 于 直接 使 用 query() 或 exec() 方 法 ,并 且 可 以 有 效 防止 SQL 注入 (因为 SQL 语句 是 
固定 的 ,不 需 接收 用 户 输入 的 参数 值 ) ,因此 这 种 方法 速度 快 而 且 安 全 。 

执行 预 处 理 语句 的 过 程 是 : 

(1) 在 SQL 语句 中 添加 占 位 符 ,PDO 支持 两 种 占 位 符 , 即 问号 占 位 符 和 命名 参数 占 
位 符 , 具 体 使 用 哪 种 任 个 人 喜好 。 两 种 占 位 符 示 例如 下 : 

$sql= "insert into lyb(title, content,author) values (2,3,3)"; //? 号 占 位 符 


$sql= "insert into lyb(title, content,author) values (:title, :content, 
:author) ™; // 命 名 参数 占 位 符 
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(2) 使 用 prepare() 方 法 准备 执行 预 处 理 语句 ,该 方法 将 返回 一 个 PDOStatement 类 





对 象 。 例 如 : 

$stmt= $db- >prepare ($sql); 

(3) 绑 定 参数 ,使 用 bindParam() 方 法 将 参数 绑 定 到 准备 好 的 查询 的 占 位 符 上 。 
例如 

$stmt— >bindParam(1,Stitle)7 // 对 于 ?号 占 位 符 , 绑 定 第 1 个 参数 


$stmt- >bindparam(':title',$title); 。”// 对 于 命名 参数 占 位 符 , 绑 定 :title 参 数 
(4) 使 用 execute() 方 法 执行 查询 。 例 如 : 
$stmt— > execute (); 
也 可 以 在 执行 查询 的 同时 绑 定 参数 ,execute 方法 的 参数 是 一 个 数组 。 代 码 如 下 : 
$stmt- > execute (array('PDD 预 处 理 ',' 这 是 插入 的 记录 ',' 西 贝 乐 )); 


提示 : 通过 执行 PDO 对 象 中 的 query() 方 法 返回 的 PDOStatement 类 对 象 ,就 是 一 
个 结果 集 对 象 ;而 通过 执行 PDO 对 象 中 的 prepare() 方 法 返回 的 PDOStatement 类 对 象 ， 
则 是 一 个 查询 对 象 ,本 书 约定 用 变量 $ stmt 表示 查询 对 象 。 

例 10.3 使 用 预 处 理 语句 插入 记录 的 示例 程序 。 


<? reqire('comn.php'); //conn.bhp 见 10.8.2 节 清单 10- 19 
$sql= "insert into 1yb (title, content,author) values (2?,2,3)"; 
// 用 ?号 作 占 位 符 
$stmt= $db- > prepare ($sql); // 惟 备 执行 查询 
$title= 'PDO 预 处 理 $content= ' 这 是 插入 的 记录 '; $author= ' 西 贝 乐 '; 
$stmt— >bindParam(l, $title); // 绑 定 第 1 个 参数 


$stmt— > bindParam(2, $content); 
$stmt-— > bindParam(3, $author); 
$stmt— >execute(); // 执 行 插入 语句 ,将 插入 一 条 记录 
echo "新 插入 记录 的 了 是 : '.$db- > lastInsertId(); 
// 如 果 要 再 插入 记录 ,只 要 添加 下 面 的 代码 即 可 
Stitler ' 第 二 条 '; ”$content=' 第 二 次 插入 的 记录 '; ”$author= ' 书 法 家 '; 
$stmt— > execute(); // 再 次 执行 重新 绑 定 参数 的 准备 语句 ,插入 第 二 条 记录 
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例 10.4 使 用 预 处 理 语句 根据 关键 词 查询 的 示例 程序 。 
该 程序 将 根据 关键 词 查询 结果 ,并 将 查询 结果 输出 。 代 码 如 下 : 


<? reqire('com.php'); //conn.pbhp 见 10.8.2 节 清单 10- 19 
$sq= "select * from 1yb where title like 2"; // 用 ?号 作 占 位 符 
$stmt= $db- > prepare ($sql); // 惟 备 执行 查询 
$title= ' 进 口 '; 
$stmt— > execute (array ("%$titles")); // 执 行 查询 的 同时 绑 定 参数 
$row= $stmt— > fetch (1); // 以 关联 数组 的 形式 将 结果 集中 第 1 条 记录 取出 
Var dmp($row)7 // 输 出 数组 


echo $row['title']; 


cbject (PDCRow)#3 (9) { ["queryString"]= > string(36) "select * fram lyb where title like ?" ["ID"]=> 
string(3) "178" ["title"]=> string(ll) "好 进口 红酒 " ["content"]=> string(18) "返回 束 蒂 冈 的 航天 员 " 
["author"]=> string(8) " 回 家 看 看 " ["erail"]= > string(9) "yaopie 163.com " ["ip"]= > string(9) "127.0.0. 
1"} ”好 进口 红酒 
提示 : 在 SQL 语句 中 有 like 的 情况 下 , 占 位 符 的 正确 写法 是 :“select * from lyb 
where title like ?”, 错 误 的 写法 是 :“select x* from lyb where title like '%?%”。 因 为 占 
位 符 必须 用 于 整个 值 的 位 置 , 在 绑 定 参数 时 再 给 关键 词 两 边 加 "%” 号 。 


10.9 ”用 PDO 制作 博客 网 站 


博客 是 一 种 个 人 展示 网 站 ,是 继 Email\QQ、 论 坛 之 后 出 现 的 第 四 种 网 络 交流 方式 。 
通过 博客 ,用 户 可 以 方便 地 建立 起 个 性 化 的 私密 空间 ,并 将 该 空间 的 内 容 有 选择 性 的 与 他 
人 进行 交流 沟通。 博客 一 般 包括 主人 的 日 志 、 相 册 、 留 言 等 模块 。 图 10-46 是 一 个 简单 
博客 网 站 的 首页 。 


10.9.1 数据 库 的 设计 


根据 博客 网 站 的 功能 需求 ,我 们 将 博客 中 的 日 志 、 相 册 、 评 论 和 留言 分 别 保存 在 一 张 
单独 的 表 中 。 此 外 ,为 了 让 博客 的 主人 可 以 登录 后 台 对 博客 中 的 内 容 进行 维护 ,还 创建 了 
一 张 管理 员 表 ,用 来 保存 管理 员 的 账号 和 密码 信息 。 下 面 是 博客 网 站 数据 库 中 包含 的 5 
个 表 的 结构 。 

数据 库 名 : Blog。 

。 日志 表 : article(ID, title, content,author, date, hits, class) 

。 相册 表 : album(id, title, author, desc. pic) 

。 评论 表 : comment(id, articleid, author,content,date) 

。 留言 表 : lyb(ID, title, content, author, email, ip, date, sex) 

。 管理 表 : admin(id,user,password) 
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1 最 新 留言 1 最 新 日 志 


Internet 技 术 的 应 用 2011/01/25 

令 多 拍 点 相片 啊 ， 大 家 分 … 
在 信息 技术 发 达 的 今天 ， 读 者 每 天 都 可 以 感受 到 Tnternet 技 术 在 生活 中 的 巨大 作用 。 通 过 
全 相片 很 好 看 ， 真 的 ， 不 … jInternet ,读者 可 以 每 天 浏览 到 最 新 的 新 闻 , 可 以 戎 与 论坛 各 种 话题 火热 的 讨论 ,可 以 和 世界 


各 地 的 朋友 一 起 玩 游戏 等 。 
令 能 否 放 一 点 北京 奥运 会 … 





仿 还 行 了 ， 虽 烘 简 单 了 一 … 





多 虽 ， 不 浇 ， 看 来 学 习 同 … 网 页 技术 学 前 班 2011/01/23 


Internet 中文 称 为 国际 互联 网。 众所周知，Internet 起 沽 于 1969 年 ， 由 美国 国防 部 授权 
ARPANET( 高 级 研究 规划 署 ) 进行 的 互联 网 的 试验 。 当 初 没 有 人 会 预料 到 ,在 几 十 年 后 的 今天 ， 
多 RN 主体 颜色 我 不 大 喜 … 加 联网 成 了 全 球 互通 的 主要 方式 。 网 页 是 TInternet 景 主要 的 明成 部 分 ， 在 本 章 恋 者 可 以 学 到 很 
多 rnternet 及 网 页 制作 方面 的 基础 知识 。TCP/IT 功 识 使 用 客户 篇/ 服务 器 模式 进行 通信 。 


令 这 个 网 站 结构 怎么 这 么 … 





雪 共 喜 啊 ， 个 人 网 站 终于 … 


1 最 新 相片 











图 10-46 博客 网 站 的 首页 


创建 好 数据 库 后 ,我 们 可 以 在 数据 库 的 每 个 表 中 添加 几 行 记录 作为 测试 数据 。 接 下 
来 ,在 Dreamweaver 中 新 建 一 个 动态 站 点 blog ,再 在 站 点 目录 下 新 建 一 个 数据 库 连 接 文 
件 conn. php ,代码 如 下 (本 例 采 用 PDO 方法 连接 数据 库 ) ,这 样 就 创建 了 网 站 与 数据 库 的 
<? $dsn "mysql :host= localhost;doname= Blog"; 
$db= new PDO ($dsn, 'root', '111'); // 连 接 数据 库 
Sadb- > query ('set names gb2312'); // 设 置 字符 集 


10.9.2 首页 的 制作 


制作 首页 的 步骤 是 : 首先 制作 一 个 静态 页 面 ,然后 在 该 页 面 的 各 个 栏目 中 绑 定 动态 
数据 。 


1. 制作 静态 页 面 


制作 动态 网 站 的 第 一 步 是 设计 静态 网 页 ,根据 如 图 10-46 所 示 的 首页 效果 图 ,编写 该 
首页 的 静态 HTML 代码 ,并 保存 为 index. php。 结 构 代码 如 下 (body 元 素 中 的 代码 ): 
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<div id "top"™> <!-- 网 页 头 部 开始 --> 


<div ic "top txt"><a href= "javascript:addFav(' 博 客 网 站 示例 ');" title=" 添 加 到 收藏 夹 吃 收藏 
本 页 < /a> |<ahref- "mailto:zhe qq.com" title= 喻 站 长 发 邮件 吃 联 系 站 长 < /a>< /div> 
< /div> 
<div id i"> 

<div id "tt"> 成 功 没有 早晚 <br /> 努力 就 有 收获 < /div> 


</div> < 上 -网 页 头 部 结束 --> 
<div id- "nav"> < 二 -网 页 导航 开始 --> 
<Ul> 


<1i><a href= "index.htm" target="”self"> 首 页 </a></li> 

<1i class= "bar"> |< /1i> 

<1li><ahref= "article.htm" target= "self> 日 志 </a></1i> 
……"<]】1i class= "bar"> |< /1i> 

<1i><a href= "msg.htm" target=" self"> 留 言 </a></li> 


</u> 
< /div> < 上 -网 页 导航 结束 --> 
<div id "main"> < 上 -网 页 主体 开始 --> 
<div id "left"> < 上 二- 左 侧 栏 开始 --> 
<h4> | 最 新 留言 < /h4> 
<u> 


<1 记 使 多 拍 点 相片 啊 , 大 家 分 享 一 下 。< /1i> 


<1i> 急 恭喜 啊 , 个 人 网 站 终于 开张 了 ,下 次 记得 请 我 们 吃饭 啊 。< /1i> 


</u> 
< /div> <!-- 左 侧 栏 结束 -> 
<div id- "right"> <!-- 布 侧 栏 开始 -> 


<h4> | 最 新 日 志 < /h4> 
< span class= "date"> 2011/01/25< /span> 
<h5> Intemet 技术 的 应 用 < /hs> 
<br />< 了 > 在 信息 技术 发 达 的 今天 "< /p> 
<hr /> 
< span class= "date"> 2011/01/23< /span> 
<h5> 网 页 技术 学 前 班 < /hs> 
<br /><p> Intemet, 中 文 称 为 国际 互联 网 。…< /p> 
< /div> < 上- 右 侧 栏 结 束 --> 
<div id- "photo™> < 小 -相册 栏 开始 -一 > 
<h4> | 最 新 相片 < /ha> 
<div id "Fhoto img"> 
< ing src= "img/1 01.jpg" /> < img src= "img/1 02.jpg" /> 
< ing src= "img/1 03.jpg" /> < ing src= "img/1 04.jpg" /> 
< img src= "img/1 05.jpg" /><h5> 森 林 美 景 < /h5> 
<h5> 地 球 景色 < /h5> <h5> 世 界 遗 产 < /hs><h5> 校 园 一 角 < /hs> 
<h5> 江 边 < /hs> 
</div> </div> < 上 -相册 栏 结束 --> 


SW.,. 页 设计 与 PHP 





</div> <!-- 网 页 主体 结束 结束 --> 
<div id= "bt"> 本 网 站 版 权 为 博 主 灰 灰 熊 所 有 <br />< span id "sysmsg"> < /span> 
< /div> 


博客 的 首页 需要 将 最 新 的 日 志 、 留 言 和 相片 显示 出 来 ,其 原理 主要 是 输出 数据 表 中 的 
记录 。 输 出 记录 的 步骤 是 : 

(1) 创建 结果 集 ; 

(2) 读 取 记 录 到 数组 中 ， 

(3) 输出 数组 元 素 的 值 到 页 面 上 

如 果 需 要 输出 多 条 记录 ,可 使 用 循环 语句 。 


2. 最 新 留言 的 数据 绑 定 


观察 一 下 ,最 新 留言 需要 输出 8 条 留言 表 (lyb) 中 最 新 留言 的 标题 (title) 字 段 。 为 
此 ,需要 先 创建 结果 集 , 将 lyb 表 中 的 记录 读 取 到 结果 集中 来 。 可 在 网 页 的 顶部 插入 如 下 
代码 : 


<? reqire('com.php'); 
$result= $db- > query ("select * from lyb order by ID desc"); 
> 


然后 就 可 输出 结果 集中 的 字段 到 页 面相 应 区 域 ,这 需要 找到 静态 网 页 中 需要 被 蔡 换 
成 动态 字段 的 代码 。 找 到 如 下 代码 : 


<div id- "Jeft"> 
<h4> | 最 新 留言 < /h4> 
<ul> 
<1 这 争 多 拍 点 相片 啊 , 大 家 分 享 一 下 。< /Li> 


<1i> 急 恭喜 啊 , 个 人 网 站 终于 开张 了 ,下 次 记得 请 我 们 吃饭 啊 。< /1i> 
</u> 
</div> 


可 发 现 , 一 条 留言 标题 对 应 一 个 li 元素 。 只 要 采用 循环 语句 循环 输出 8 个 1 元素, 就 
能 输出 8 条 记录 中 的 留言 标题 了 。 为 此 , 先 将 ul 中 的 上 i 元素 只 保留 一 个 ,然后 将 这 个 i 
元 素 放 到 循环 语句 中 循环 输出 8 次 ,再 将 li 元 素 的 内 容 改 为 <? 二 $ row[ "title"] ? 二 >。 
修改 后 的 代码 如 下 : 


<div id- "Jeft™> 
<h4> | 最 新 留言 < /h4> 
<u> 
<? if($result->rowcomnt()>0){ 
for($i=0;$i< 8;Si++){ 
$row $result— > fetch (1); > 
<li> 全 <=$row["title"] 2></1i> 
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<? 二 
else echo "<g> 目前 还 没有 用 户 留言 < /p> "; 
> < /up < /div> 


提示 : 上 述 代 码 中 含有 判断 留言 记录 是 否 为 空 的 语句 。 这 样 将 使 程序 具有 容错 性 ， 
即使 留言 表 中 记录 为 空 , 程 序 也 不 会 出 错 。 


3. 最 新 日 志 的 数据 绑 定 


最 新 日 志 版 块 输出 了 article 表 中 的 两 条 最 新 日 志 。 每 条 日 志 分 别 输出 了 标题 .日 其 
和 内 容 , 分 别 对 应 title .content 和 date 字段 。 找 到 静态 页 面 中 的 如 下 代码 : 


<h4> | 最 新 日 志 < /h4> 

< span class= "date"> 2011/01/25< /span> 
<h5> Internet 技术 的 应 用 < /h5> 

<br/> 

< 户 在 信息 技术 发 达 的 今天 ,…< /p> 

<hr /> 
< span class= "date"> 2011/01/23< /span> 

<h5> 网 页 技术 学 前 班 < /h5> 
<br /> 
<p> Intemet, 中 文 称 为 国际 互联 网 。…< /p> 
< /div> <!-- 右 侧 栏 结束 --> 


可 以 将 两 条 日 志 的 代码 只 保留 一 条 ,使 用 循环 的 方式 循环 输出 两 条 ,然后 在 相应 的 位 
置 分 别 伐 和 要 显示 的 动态 字段 。 修 改 后 的 代码 如 下 : 


<h4> | 最 新 日 志 < /h4> 
< ?$result= $db- > query ("select * from article order by ID desc limit 2"); 
if ($result- > rowCount ()> 0) { 
while ($row= $result- > fetch(1)){ > 
< span class= "date"> < = $row["date"] 2>< /span> 
<h5>< 2 $row["title"] ?> < /hs> 
<br /> 
<E><ahre 全 "article.bhp?id< = $row["ID"] 2>" >< $row["content"] ></a>< /p> 
<hr /> 


过 时 ]}} > 
提示 : 上 述 代 码 使 用 “limit 2” 子 名 使 结果 集中 只 包含 两 条 记录 。 
4. 最 新 照片 的 数据 绑 定 


在 网 页 上 如 果 要 输出 照片 ,一 般 是 通过 将 照片 的 URL 地 址 放 入 到 img 标记 的 src 属 
性 中 来 输出 。 由 于 每 张 照 片 的 URL 地 址 已 保存 到 了 数据 表 album 的 pic 字段 中 ,直接 输 
出 该 pic 字段 值 到 src 属性 中 即 可 。 


<div id "photo"> 
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<h4> | 最 新 照片 < /h4> 

<div id "photo img"> 
< img src= "img/1 01.jpg" /> 
< img src="img/l 02.jpg" /> <inmg src="img/l 03.jpg" /> 
< img src= "img/l 04.jpg" /> <ing src= "img/l 05.jpg" /> 





<h5s> 和 森林 美景 < /hs> 
<h5> 地 球 景色 < /h5> <h5> 世 界 遗 产 < /h5> 
<h5> 校 园 一 角 < /h5> <h5> 江 边 < /h5> 


</div> </div> 


将 静态 网 页 中 5 个 重复 的 img 元 素 只 保留 一 个 ,使 用 循环 语句 循环 输出 5 次 , 即 得 到 
了 5 张 图 片 , 图 片 标题 对 应 的 h5 元 素 同 样 也 只 保留 一 个 ,再 使 用 循环 语句 输出 。 代 码 
如 下 : 
< div id "thoto"> 
<h4> | 最 新 照片 < /h4> 
<div id "photo img"> 
< ?$result= $db- > query ("select * from album order by ID desc limit 5"); 
if ($result— > rowcount ()> 0) { 
while ($row= $result— > fetch(]1)){ > 
< img src= "img/< = $row["pic"] 2>" /> 
» }} 
$result= $db- > query ("select * fromalbum order by ID desc limit 5"); 
while ($row= $result— > fetch(1)){ > 
<h5><= $row["title"] ?> < /hs> 
过 全 } > 
< /div> < /div> 


10.9.3 留言 模块 的 制作 


博客 与 访客 互动 主要 依靠 留言 模块 和 评论 模块 。 从 功能 上 看 ,留言 模块 程序 分 为 三 
部 分 , 即 显 示 留 言 (对 应 显示 记录 ) 发 表 留 言 (对 应 添加 记录 ) 以 及 博客 主人 对 留言 的 管理 
(对 应 修改 和 删除 记录 ) 。 

留言 模块 的 界面 如 图 10-47 所 示 。 该 界面 上 方 显示 留言 列表 ,下 方 供 访客 发 表 留 言 。 


1. 显示 留言 列表 的 实现 


本 例 中 将 一 条 留言 放置 在 一 个 div 元 素 中 ,并 用 CSS 设置 样式 。 该 div 中 可 显示 留 
言 的 标题 作者、 作者 图 像 . 内 容 、 发 表 时 间 和 来 自 等 信息 ,HTML 代码 如 下 : 
<div id 四 iuyan"> < img src= "images/1.gif" style= "float:left;"/> 
<h3> 请 教 个 问题 </h3>< 户 作者 : 唐三彩 < 人 > 
< 户 内 容 : 虚拟 目录 中 …< /p><p align= "right"> 发 表 时 间 : 
2013- 9- 10 来 自 : 127.0.0.1< /> </div> 


只 要 将 这 个 div 放 在 循环 语句 中 循环 输出 ,并 将 其 中 的 静态 文本 替换 成 对 应 的 动态 
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.请 教 个 问题 


内 容 : 虚拟 目录 中 的 文件 如 何 预览 
发 表 时 间 : 2010-11-09 10:57:21 来 自 ; 127.0.0.1 


第 五 条 留言 





作者 : 响 志 
内 容 : 在 古巴 比 伦 的 大 草原 上 


发 表 时 间 : 2010-11-16 20:32:20 来 自 ; 127.0.0.1 









































图 10-47 留言 模块 界面 (msg. php) 的 效果 


字段 ,就 得 到 图 10-47 中 留言 列表 界面 ,代码 如 下 : 


<? require('comn.php'); 
$result= $db- > query ("select * fram lyb order by ID desc"); 
echo ' 共 有 '.$result- >rowcount().' 条 留言 '; > 
<a hre 人 - "Search.php> 搜 索 留 言 </a> <ahre 伍 "ogin.htm> 管 理 留言 < /a> < /p> 
<? if($result->rowcount()>0){ 
while($row= $result-— > fetch(1)){ BS 
<div id "liuyan"> < img src= "images/< = $row["sex"]?> .gif" style= 
"float:left;"/> 
<h3><2-S$row["title"] 2></h3>< 户 作者 :< 守 $row["author"] ?2>< /p> 
< 户 内 容 :< 汪 $row["content"]?>< /p><p align= "right"> 发 表 时 间 : 
< 汪 $row["date"]> 来 自 :< 三 $row["ip"]2></p> </div> 
尖 滞 }} 


else echo “<p> 目前 还 没有 用 户 留 言 < /p> "; > 
该 div 元 素 调用 的 全 部 CSS 代码 如 下 : 


< style type= "text/css"> 
#1iuyan { 
margin:8pz auto; 
Width:94%7 
border:1px solid #990C99; 
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padding:Bpx; } 

#1liuyan h3 { 
text— align:center7 
border- bottom: lpx dashed gray; 
background:#FFFF99; } 

#liuyan p { 
font:12px/1.6 "宋体 "; 
margin:2px; } 

< /style> 


说 明 : 表 1lyb 的 sex 字段 取 值 为 1 或 2。 并 在 images 目录 下 放置 了 两 张 图 片 1. gif 和 
2. gif 。 


2. 发 表 留 言 的 实现 


发 表 留 言 就 是 添加 一 条 记录 ,其 程序 包括 供 访客 发 表 留 言 的 表单 和 接收 表单 数据 的 
程序 。 表 单 代码 如 下 : 


<h2 align= "center" style= "background- color:#cc9; font- size:14px;"> 发 表 留 言 < /h2> 
< form method= "post" action= "submit.php"> 
< table border= "0" align= "center" oellpadding= "4" oellspacing= "1" 
bgcolor= "#666633"> 
< tbody bgcolor= 只 ffffff"> 
<tr><tdwidth= "125"> 留 言 主题 :< /td> 
< td width= "475"> < input type= "text" name= "title"> < /td> < /tr> 
<tr><t 中 留言 人 :< /td> 
< to> < input type= "text" name= "author"> 
性 别 : 男 < input type= "radio" name= "sex" value= "2" /> 
女 :<input type= "radio" name= "sex" value= "1" />< /to>< /tr> 
<tr><to> 联 系 方式 :< /td> 
<to> < input type= "text" name= "email"> < /td> < /tr> 
<tr><to> 留 言 内 容 :< /td> 
< to> < textarea name= "oontent" ools= "30" rows= "3"> < /textarea> < /tc> < /tr> 





<tr><to</to> 
<to> < input type= "submit" name= "Submit" value= "得 交 吃 < /to>< /tr> 
< /tbody> < /table> < /fom> 


接收 表单 数据 并 将 数据 作为 一 条 记录 添加 lyb 表 的 程序 如 下 ,本 例 采用 PDO 的 预 处 
理 语 句 执行 插入 记录 的 SQL 语句 。 插 入 完成 后 自动 转 到 留言 列表 页 面 msg. php。 


<? $title=$ PosT["title"]; $author=$_POST ["author"]; 
$sex=$ POST["sex"]; $coontent=$ POST["content"]; 

$email=$ POST["email"]; $date= date("Y-m- d H:i:s"); 

$ip= $_SERVER['FEMOIE ADCR']; 

require ('comn.php'); 

$sql= "insert into lyb(title,author, content, sex,date, ip) values (23,23,3,2,3,3)"; 
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$stmt= $db- > prepare ($sql); // 叭 备 执行 查询 
$stmt— >bindParam(1,Stitle)7 // 绑 定 参 数 
$stmt— > bindParam(2, $author) ; $stmt— >bindparam(3, $content); 
$stmt— > bindParam(4,Ssex)7 $stmt— >bindParam(5,Sdate)7 
$stmt— > bindparam(6, $ip); 
$stmt— > execute (); // 执 行 插入 命令 
header ("Location:msg.php"); > 
10.9.4 博客 后 台 登 录 的 实现 
1. 用 户 登录 界面 


在 登录 博客 后 台 前 ,必须 先 验证 用 户 的 用 户 名 和 密码 ,以 确定 是 否 是 真实 的 管理 员 ， 
因此 管理 登录 将 链接 到 login. htm ,该 页 面 代码 如 下 ,效果 如 图 10-48 所 示 。 


<h4 align= "oenter"> 博 客 后 台 用 户 登 录 < /h4> 
< fom method= "post" action= "chklogin.php"> 
<table border= "1"> <tr>< td align= "center"> 用 户 名 :< /td> 
< to> < input name= "admin" type= "text" size="12" />< /td> < /tr> 
<tr><t 中 密码 :< /to> 
< to> < input name= "password" type= "password" size= "12" />< /td> < /tr> 
<tr><td> 验 证 码 : < /to> 
< to> < input name= "code" type= "text" /> <a href= "javascript:reloadoode ();"> 
< img src= "code.php" idF "code" border= "0" align= "absmidale"/> < /a> < /td> 
< /tr> 
<tr><to< /to < to <input type= "suitmit" value= "登录 " /> 
<a hre 人 "zhuce.htm> 注 册 < /a>< /td>< /tr> 
< /table> < /form> 
< Script> 
function reloadcode(){ // 刷 新 验证 码 的 函数 
document.getElementById('code') .src= 
‘00de.php?'+ Math.random(); 
} < /script> 


为 了 提高 安全 性 ,该 用 户 登 录 模 块 设置 了 验证 码 验证 功能 ,验证 码 的 实现 主要 是 : 首 
先 产业 一 个 随机 字符 串 ,然后 将 该 字符 串 保存 到 一 
个 Session 变量 中 。 接 着 使 用 PHP 内置 的 绘图 函 
数 将 字符 串 绘 制 在 一 张 图 片 中 ,最 后 通过 header 函 
数 设置 PHP 文件 以 图 片 格式 输出 。code. php 的 代 
码 如 下 : 

















<? session start(); 

fimction randcm($len) { 
$str= "ABCDEFGHIJKIMNOPORSTUVWXYZ0123456789"; 
$e; 图 10-48 用 户 登录 界面 
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for($i=0;$i< $lenzSi++){ 
$s.=$str[rand (0,35)]; } 
retum strtoupper ($s); } 





$code= randcm(4)7 // 随 机 生成 4 位 长 度 的 字符 串 

$ SESSION["code"]= $code; /将 验证 码 保存 到 sessicn 变量 中 
Swidth= 50; /验证 码 图 片 的 宽度 

Sheight= 20; /验证 码 图 片 的 高 度 

$ im imagecreate ($width, $height) ; // 给 制 验 证 码 图 片 

$back= imagecolorallocate ($im, 255, 255, 255); 1/ 设置 图 片 背 景色 为 白色 
$pix= imagecolorallocate ($im, 187, 230, 247) ; // 设 置 模糊 点 颜色 

$font= imagecolorallocate ($im, 41, 63, 238) ; // 设 置 字符 颜色 
for($i=0;$i<1000;$i+ +) { // 绘 模糊 作用 的 点 


imagesetpixel ($im, rand (0, $width) ,rand (0, $height), $pix); 
} 
imagestring ($im, 5, 7, 2,$code,$font); 
imagerectangle ($im, 0,0, $width- 1, $height— 1,$font); 
@ heager ("Content— Type:image/png"); // 设 置 nead 信 息 ,输出 图 片 
imagepng ($im); // 将 图 像 流 以 BG 格式 输出 
imagedestroy ($im); > 


2. 验证 用 户 登录 程序 


验证 用 户 登 录 程序 是 将 用 户 输入 的 用 户 名 和 密码 在 admin 表 中 进行 查找 ,如 果 查 找 
得 到 的 结果 集 不 为 空 , 就 表明 有 匹配 的 用 户 名 和 密码 ,验证 通过 ,将 转 到 后 台 管理 页 面 
admin. php ,并 赋予 用 户 一 个 Session 变量 ,否则 提示 用 户 名 或 密码 不 正确 。chklogin. 
php 的 代码 如 下 : 


<? session start(); 
require('oonmn.php'); 
$code2= $_POST['code']; 
if($code2==$ SESSION["code"]){ // 如 果 获 取 的 验证 码 正确 
$admire strip tags (substr($_POST['admin'],0,32)); 
$password= strip tags (substr ($_POST['password'],0,32)); 
$Crptpw= crypt (nd5 ($password) ,mo5 ($admin) ); 
$sql= "select * ”from admin where user= '$admin' and password= '$crptpw'"; 
$result= $db- > query ($sql); 
if ($result— > rowCount ()==0) { // 如 果 aanin 表 中 查 不 到 对 应 的 记录 
Unset ($_SESSION['admin']); 
echo "< SCRIPT> alert ("输入 的 用 户 名 或 密码 不 正确 !');history.go(- 1) 
< /SCRIPI> ™; 
exit ();} 
else{ 
$row $result— > fetch (1); 
$_SESSION['admin']= $row['user']; // 将 用 户 名 保存 到 Session 变量 中 
echo "< script> location.href— 'adminuser.php'</scrip>"; } } 
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else echo "< script> alert(" 验 证 码 不 正确 ,请 重新 输入 !');history.go(-1) 
cit> 人 
> 


3. 验证 用 户 是 否 已 经 登录 的 代码 实现 


在 所 有 后 台 管理 页 面 开 头 ,都 需要 验证 用 户 的 $_SESSION[L'admin"] 变 量 是 否 为 空 ， 
如 果 为 空 ,就 表明 没有 登录 ,而 是 通过 直接 输入 admin. php 的 网 址 进入 的 ,此 时 不 允许 其 
访问 后 台 , 并 将 其 引导 至 登录 页 面 。 


， session start(); 
if($_SESSION['acdmin']=="") { 
echo "< script> alert (' 您 尚未 登录 或 Session 超时 ') ;locatian.href= '1ogin.htmy 
</script> "; 
exit ();} Eg 
由 此 可 见 ,Session 变量 相当 于 系统 给 登录 成 功用 户 发 的 一 张 “ 票 ”", 而 所 有 后 台 管理 
页 面 都 需要 先 验 票 才 能 决定 是 否 允 许 用 户 访问 ,有 了 这 张 票 才能 访问 后 台 管 理 页 面 


10.9.5 博客 用 户 注册 模块 的 实现 


博客 用 户 注册 模块 的 主要 功能 是 : 首先 提供 一 个 表单 页 面 供用 户 输入 要 注册 的 用 户 
名 和 密码 等 信息 ,如 图 10-49 所 示 ; 用 户 提交 表单 后 ,检查 用 户 输 入 的 用 户 名 是 否 已 经 被 
注册 ,如 果 未 被 注册 , 则 允许 注册 ;程序 将 对 用 户 输 入 的 密码 进行 加 密 , 将 加 密 后 的 密码 连 
同 用 户 名 一 起 存放 在 数据 表 admin 中 。 接 收 并 处 理 用 户 注册 信 息 的 程序 代码 如 下 : 









E TU olxl 


文件 E) 编辑 EE) 查看 WW 收 总 (” 辟 


于 十 加 | 狠 http;//1ocalho: 加 | 园 甘 到 | 泛 接 




















新 用 户 注册 
用 户 名 : [ 
密码 : Jeeeee 











请 再 输 一 遍 FE 一 
Email : [Er ca 
[本 | 

































图 10-49 用 户 注 册 的 表单 界面 
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require ('comn.php'); // 连 接 数 据 库 ,使 用 PDo 函 数 

/获取 表 单 信息 ,并 过 滤 表 单 中 的 危险 字符 
$admin=mysql_ real escape string(strip tags (substr($_POST['admin'],0,32)))7 
S$password= mysql_real escape string(strip tags (substr($_POST['password'],0,32))); 
S$crptpwr crypt nd5 ($password) ,md5 ($admin)); // 将 用 户 提 交 的 密码 进行 加 密 
$sql= "select * from admin where user= '$admin'"; 
$result= $db- > query ($sq1); // 查 询 用 户 名 是 否 已 经 被 注册 
if($result- > rowCount ()> 0){ 

echo "< script> alert ("该 用 户 名 已 经 注册 ,请 更 换 1') ;history.go(- 1)< /script> "; 





Exit ();} 
$sql= "insert into admin (user,password) values('$admin', '$crptpw')"; 
$affected= $db- > exec ($sql); // 将 用 户 注册 信息 插入 到 admin 表 中 


if ($affected==1){ 
echo "< script> alert ("用户 注 册 成 功 1');history.go(-1)< /script>"; 
exit); } PP 


10.9.6 用 户 管理 模块 的 实现 


用 户 管理 模块 包括 用 户 管理 主页 面 , 如 图 10-50 所 示 。 在 该 页 面 上 可 以 删除 用 户 或 
修改 用 户 密码 。 该 程序 首先 执行 查询 显示 admin 表 中 所 有 的 用 户 记 录 , 每 条 用 户 记录 的 
右边 提供 删除 和 修改 密码 链接 , 当 单 击 "删除 ”链接 时 , 转 到 act. php 并 根据 记录 id 删除 
对 应 的 用 户 记录 。 当 单 击 “ 修 改 " 链 接 时 ,在 页 面 下 方 弹出 修改 密码 的 表单 界面 ,要 求 用 户 
输入 原始 密码 和 新 密码 ,用 户 输入 完成 后 , 单 击 “ 确 定 ” 按 钮 将 转 到 act. php 页 面 。 用 户 管 
理 模 块 的 代码 如 下 : 


ET TT ol xl 


文件 外 编辑 四 查看 WW 收 着 内 工具 CD) 玫 助 ” 慎 





[用户 名 | ”密码 

Im ad00oaXrlpUwI 
super “|23PU7oUyf6I/U 
admin trIAjsqLeleks 
4 ltang fdelVy2v3TupuA 

共有 4 条 用 户 记录 
































修改 密码 





用 户 名 ， 
原来 密码 ， 
新 密 码 : 
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$result=$db- >query('select * franadmin');  // 执 行 查询 创建 结果 集 
$result— > setFet dMode (PDO: :FETCH ASSOC); 
2><h3> 后 台 用 户 管理 < /h3> 
<table border= "]" width= "95%"> 
< tr bgcolor= "#e0e0e0"™> 
<th> ID</th><th> 用 户 名 < /thb><th> 密 码 < /th><t> 删 除 < /th><th> 修 改 < /th> 
< /tr> 
<? while($row= $result— > fetch()) { // 读 取 一 条 记录 到 数组 $row 中 
?><tr> 
<tdp<2S$row['id']j?>< /to> <to < $row['user']; ?> < /td> 
<to><=$row['password'];?> < /td> 
<td> <a href= "act.php?del= ygid=< 汪 $row["'id'] > 吃 删 除 < /a>< /td> 
<td><ahref= "od ygid=< 守 $row['id'] > 吃 修 改 < /a>< /td> 





</tr> 
«eS 
</table><p> 共 有 <2S$result- >rowcont()2> 行 < /p> 
<? 
if($_GET['mod']=='y') { // 如 果 是 单 击 了 “修改 "链接 
$id- intval($_GET['id'])7 // 将 获取 的 刘强 制 转换 为 整 型 
$sql= "Select * fram admin where ID-=$id"; // 查 询 待 修改 的 记录 
$result= $db- > query ($sql); // 执 行 查询 创建 结果 集 


$result- > setFetchMpde (PDO: :FETCH ASSOC); 
$row= $result— > fetch(); // 将 待 修改 记录 各 字段 的 值 存 人 数组 中 
> 
<h2 align= "oanter"> 修 改 密码 < /h2> 
< form method= "post" action= "act.bhbp3mpd= y&id=< = $row['id'] 2> "> 
< table width= "400" border= "1" align= "canter" oellpadding= "2"> 
<tr><tdwidth= "125"> 用 户 名 :< /to> 
< td widthe= "275"> < irput type= "text" name= "User" value= "< = $row['user'] > > * </to> 
</tr> 
<tr><td 原 来 密码 :< /to> 
<td> < input type= "text" name= "oldpws"> * < /td>< /tr> 
<tr><t 中 新 密 码 :< /td> 
<td> < input type= "text" name= "password"> * < /td> < /tr> 
<tr><td> gnbsp;< /td><td>< input type= "sutmit" value= " 唤 定 必 </td>< /tr> 
< /table> < /form> 
<? 】} ?> // 证 语句 结束 


10.9.7 删除 用 户 与 修改 用 户 密码 


删除 用 户 的 程序 流程 是 : 当 在 图 10-50 中 单 击 “删除 ?链接 时 ,就 会 转 到 act. php 页 
面 ,并 传递 del 二 y 和 id=n 两 个 url 变量 给 act. php ,该 程序 根据 del=y 可 判断 是 要 执行 
删除 操作 ,并 根据 id 删除 对 应 id 的 用 户 记 录 。 

修改 用 户 密码 的 程序 流程 是 : 当 在 图 10-50 中 单 击 修改 密码 表单 中 的 “确定 ”按钮 
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时 ,就 会 转 到 act. php 页 面 ,并 传递 mod=y 和 id 二 n 两 个 url 变量 给 act. php ,该 程序 根 
据 mod==y 可 判断 是 要 执行 修改 密码 操作 ,修改 密码 操作 又 分 为 两 步 : 首先 查询 用 户 输 
入 的 原来 密码 是 否 正确 ,如 果 不 正 确 则 退出 修改 程序 ;如 果 正 确 则 将 用 户 密码 修改 为 新 密 
人 码 。act. php 的 程序 代码 如 下 : 





<? ------------------ 清单 10-7act.php---------------------- 
require ('comn.php'); 
$id intval ($_GET['id']); // 将 获取 的 刘强 制 转换 为 整 型 
if($_ GET['del']=="y"){ // 如 果 是 单 击 了 “删除 ”链接 
$sql= "delete from admin Where ID= $id"; // 根 据 这 删除 记录 
S$affected= $db- >exec($sql)7 
if ($affected==1){ // 判 断 是 否 删除 成 功 
echo "< script> alert(" 该 用 户 已 经 被 删除 !") ;location.href= 'adminuser.php';< /script> "; 
exit (); 
} 
if($_ GET['mod']=="y"){ // 如 果 是 修改 密码 操作 


// 获 取 表 单 信息 ,并 过 滤 表 单 中 的 危险 字符 
$adnin= mysql_real_escape string(strip tags(substr($_FOST['ruser'],0,32)))7 
$oldpws= mysql_real escape string (strip tags (substr ($_FOST['oldpws"],0,32))); 
$oldcrptpwr crypt (nd5 ($0ldpws) md5 ($adnin) ); 
$sql= "select * fram admin where user= '$adnin' and passwordF= '$0]dcrptpw'"; 


$result= $do- > query ($sql); 

if ($result— > rowcount ()==0) { // 如 果 输 入 的 用 户 名 或 原 密码 有 误 
echo "< script> alert (' 您 输入 的 原 密码 不 正确 !');history.go(- 1)< /script>"; 
exit(); 


} 

S$password= mysql_ real escape string(strip tags (substr($_FOST["password'],0,32)))7 

$crptpw= crypt (mos ($password) ,md5 ($admin) ); 

$sql= "Update admin Set password= '$crptpw' Where ID= $id"; // 修 改 用 户 密码 

S$affected= $db- > exec ($sql); 

if ($affected==1){ 
echo "< script> alert (' 用 户 密码 修改 成 功 !1') ;location.href= 'adminuser.php';< /script> "; 
exit (); 


]} > 


习 题 10 


一 、 练 习题 


1. PHP 哪个 函数 用 于 向 MySQL 数据 库 发 送 SQL 语句 ? ( ) 
A. mysql_select_db B. mysql_connect 
C. mysql_query D. mysql fetch field 


录 ? (人 


8. 


9, 
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. PHP 连接 上 MySQL 之 后 ,下 列 哪个 函数 配合 循环 可 以 得 到 指定 表 中 的 多 条 记 


) 
A. mysql_fetch_row B. mysql_select_db 
C. mysql_query D. mysql_data_seek 
. “mysql_query("set names gb2312");”, 该 行 代 码 一 般 写 在 哪里 最 合适 ? ( ) 
A. 创建 结果 集 之 前 B. 创建 结果 集 之 后 
C. 选择 数据 库 之 前 D. 连接 数据 库 服 务 器 之 前 
. 下 列 哪个 函数 可 以 将 结果 集 的 指针 移动 到 指定 的 位 置 ? 〈 ) 
A. mysql_fetch_row B. mysql_fetch_assoc 
C. mysql_query D. mysql_data_seek 
. PHP 连接 mysql 数据 库 的 连接 函数 mysql_connect 的 第 三 个 参数 是 ( ;让 
A. 主机 名 B. 数据 库 密 码 C. 数据 库 用 户 名 ”D. 报错 信息 


. mysql_affected_rows() 函 数 对 下 列 哪个 操作 没有 影响 ?( ) 


A. select B. delete C. update D. insert 


.mysql_insert_id() 函 数 的 作用 是 ( Ys 


A. 返回 下 一 次 插入 记录 的 id 值 B. 返回 刚 插 入 记录 的 自动 增长 的 id 值 
C. 查看 做 过 多 少 次 insert 操作 D. 查看 一 共有 多 少 条 记录 

mysqli 中 返回 结果 集中 记录 总 数 的 函数 是 ( ) 。 

A. fetch_row B. fetch_assoc C. num_rows D. field_count 


如 果 在 PHP 中 使 用 Oracle 数据 库 作为 数据 库 服 务 器 ,应 该 在 PDO 中 加 载 下 面 哪 














个 驱动 程序 ?( ) 


10 


11 


12 


A. PDO_DBLIB B. PDO_MYSQL 
C. PDO_OCI D. PDO_ORACLE 


. PDO 中 要 设置 返回 的 结果 集 为 关联 数组 形式 , 需 使 用 ( ) 。 


A. fetch_row() B. fetch_assoc() C. fetch() D. fetch(2) 


. 如 果 在 PDO 中 要 执行 已 准备 好 的 预 处 理 语句 ,应 使 用 下 列 哪个 方法 ? 〈 ) 


A. query() B. execute() C. exec() D. fetch() 


. 使 用 mysql_query() 函数 发 送 SELECT 语句 时 ,执行 成 功 将 返回 一 个 ， 


若 执行 查询 失败 则 返回 。 如 果 执 行 非 select 语句 ,执行 成 功 时 返回 ,出 


错时 返 
18 


回 








. 在 mysqli 函数 库 中 ,从 结果 集中 取出 一 行 并 返回 一 个 关联 数组 的 函数 是 


,返回 一 个 索引 数组 的 函数 是 ,返回 一 个 混合 数组 的 函数 是 a 


14 
15 


. 在 mysqli 中 ,用 来 同时 执行 多 个 查询 语句 的 函数 是 
. 为 了 避免 访问 ? MySQL? 数据 库 时 出 现 乱 码 现象 ,应 在 数据 库 连接 文件 中 添加 


什么 语句 ? 


16 
17 
18 


. PHP 访问 MySQL 数据 库 ,通常 有 哪 三 种 方法 ? 
- MySQL 中 使 用 Select 语句 查询 时 ,要 设置 返回 的 行 数 可 使 用 子 句 。 
. 作为 主键 的 ID 字段 应 在 “额外 ”中 设置 为 ,新 闻 标 题字 段 一 般 应 设置 为 
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类 型 ,新 闻 内 容 字段 应 设置 为 类 型 。 
19. 语句 可 以 向 已 存在 的 表 中 添加 记录 。 


20. 在 MySQL 数据 库 中 ,varchar 和 char 两 种 数据 类 型 有 何 区 别 ? 

21. 假设 表 users 的 结构 如 下 ,请 写 出 “查询 发 帖 数 最 多 的 10 个 人 名 字 ” 的 SQL 
语句 。 

users(id, username, posts, pass, email) 

22. 修改 10. 3. 3 节 中 的 10-2. php, 使 它 只 显示 title 字段 字段 值 , 并 且 一 行内 显示 3 
条 记录 的 title 字段 。 

23. 编写 程序 ,将 lyb 表 中 的 无 重复 的 title 字段 值 填充 到 一 个 下 拉 列 表 框 中 。 


